search

nobitagit / material-floating-button

Vanilla Js Material design floating menu with action buttons.
http://nobitagit.github.io/material-floating-button/
MIT License
299 stars 69 forks source link

Firefox has black boxes during transition rendering #16

Open kennymalac opened 9 years ago

kennymalac commented 9 years ago

Example of animation flickering I came across this issue when using this in firefox. I already found the solution, however my setup is quite different so I'll just provide the solution instead of sending in a pull request (I didn't generate the updated dist/ file)

Just add visibility: hidden to everywhere you use opacity: 0, and visibility: visible to any lines doing opacity: 1. Firefox seems to render the element anyhow in that distorted animation

nobitagit commented 9 years ago

Uhm that's interesting, both my Firefoxes (v39 and Nighlty on Mac OS) render it ok.

Will inspect further. Anyway the workaround you suggest looks very doable, although a bit tricky for me as I can't test if I'm applying the fix properly, being unable to reproduce.

Thanks for chiming in!

kennymalac commented 9 years ago

OK so the visibility: hidden property made the black boxes occur much less often, but the solution that really worked was adding this property to .mfb-component-list > li { outline: 1px solid transparent; }

See http://stackoverflow.com/questions/27897413/css-transform-bug-in-firefox-win7-version-not-in-mac

nobitagit commented 9 years ago

Thanks for this, will publish the suggested fix in the next few days.

c0d3p03t commented 6 years ago

I am seeing these black boxes appear in several places with recent updates. It is only Windows that has this issue, macOS doesn't.

Example: https://www.screencast.com/t/F8cHZC9swX Same site in Win Chrome: https://www.screencast.com/t/2tAei15ja5ON

Interesting thing is in doing research I found that someone said it could be related to extensions so I restarted FF in safe mode and the problem was gone so I thought it was an extension. I restarted normally and removed all extensions thinking I would add back in one at a time to see which was causing it. The problem persisted even with all extensions disabled.

Other sites are doing it as well. This is just WINDOWS. I realize this is a really old thread but it is still open and thought I would add my experience.

c0d3p03t commented 6 years ago

This fixed my issue in case anyone is still viewing this thread.

https://support.mozilla.org/en-US/kb/forum-response-disable-hardware-acceleration