Firefox has black boxes during transition rendering

[kennymalac]

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]

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]

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]

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

[c0d3p03t]

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]

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

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