Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari hangs on all animations / transitions #315

Closed
0x80 opened this issue Feb 7, 2015 · 9 comments
Closed

Safari hangs on all animations / transitions #315

0x80 opened this issue Feb 7, 2015 · 9 comments
Labels
browser: Safari component: transitions This is the name of the generic UI component, not the React module!

Comments

@0x80
Copy link

0x80 commented Feb 7, 2015

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
Copy link

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

@0x80
Copy link
Author

0x80 commented Feb 11, 2015

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

@keeth
Copy link

keeth commented Feb 13, 2015

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
Copy link
Member

hai-cea commented Feb 14, 2015

Are you guys using an autoprefixer in your build process?

@keeth
Copy link

keeth commented Feb 14, 2015

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

@hai-cea
Copy link
Member

hai-cea commented Feb 14, 2015

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
Copy link

keeth commented Feb 14, 2015

That fixed it for me, thanks!

@0x80
Copy link
Author

0x80 commented Feb 17, 2015

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
Copy link
Author

0x80 commented Feb 17, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
browser: Safari component: transitions This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

6 participants