Safari hangs on all animations / transitions

[0x80]

If run material-ui from source using gulp or visit the website Safari is fine, obviously. But in my own project where I'm using Browserify with a 6to5 transform. Chrome and Firefox behave like normal but in Safari the whole interface hangs and no interaction is possible:

• left menu is open
• buttons show static start of hover animation
• textfields have colored underlining
• etc

At this point I just don't know what to look for, so I was hoping someone would have a clue on what might be causing this.

[yhbrandon]

I am able to reproduce this issue as well. Investigating the possible cause now

[0x80]

@yhbrandon good to know that I'm not alone in this! I didn't find the time yet to investigate further...

[keeth]

I'm seeing a lot of brokenness in Safari too, with a local gulp server and browserify.

Another issue is with the left nav. In my app it's hidden by default, in Safari it shows up already open, and can't be closed. Not sure if it's related to this issue.

am just using a project generated by https://github.com/shovon/generator-react-material-ui but with Material UI updated to the latest.

[hai-cea]

Are you guys using an autoprefixer in your build process?

[keeth]

Nope.. here's my gulpfile: https://gist.github.com/keeth/9747897daa77174e17e9

[hai-cea]

Adding an autoprefixer should fix the problem then. That's what we're doing on the docs site:

https://github.com/callemall/material-ui/blob/master/docs/gulp/tasks/less.js#L13

[keeth]

That fixed it for me, thanks!

[0x80]

The autoprefixer seems to have solved all visual things for me too.

The problem I'm facing now is that onChange events from RaisedButton, IconButton and FloatingActionButton don't seem to be fired in Safari. The LeftNav works including its links. I don't know about the other buttons.

I assume this must be something different than vendor prefixes... Any clue?

[0x80]

I should have searched the issues first. I just found #307, so I assume this has been solved. Great!