Foundation-sites: Orbit "White Flash" Visual Bug in Firefox 58

[bitbruder]

How to reproduce this bug:

1. Open the Orbit Docs in Firefox 58
2. Scroll to the example
3. Click the Arrows, see the "white flash"

What should happen:

There should be a seamless animation between the images.

What happened instead:

There is a white flicker / flash between the animations. Its also happening with the HTML Content Examples. Its not a Image only problem.

Browser(s) and Device(s) tested on:

Firefox 58, Windows and Mac.

Foundation Version(s) you are using:

6.4.

Test case link:

https://foundation.zurb.com/sites/docs/orbit.html

Additional Information

• Firefox started breaking the Orbit Animation, when they released Version 58
• It was working fine in Firefox Version 57
• Someone already made a Video about the Bug https://www.youtube.com/watch?v=p-xjjJAWEXw
• I noticed, that when you click to the "left" direction, the Contents get properly displayed
• It seems that fading with motionUI works just as expected, but sliding to the left causes problems
• When you check out the demo pen (https://codepen.io/IamManchanda/pen/GmGzWY?editors=1100) it seems to work, but when you start to play around with the bullet points, its also happening

[gaialabs]

Discovered that bug too. Published a post in the Foundation forum, no answer. But the video I made is here :-) It fails since version 58.0b3 of Firefox. The bug is still there with version 59b3, but a bit "less" visible.

[DanielRuf]

I bisected the builds and the following change is the cause

2018-02-10T10:42:11: DEBUG : Using url: https://hg.mozilla.org/integration/autoland/json-pushes?changeset=fa94f7205173d34f23975c6af9cb95237b28c8b8&full=1
2018-02-10T10:42:12: DEBUG : Found commit message:
Bug 1190721 - Throttle animations that produce any transform change hint if the target element is out-of-view. r=birtles

And unthrottle them on every 200ms just like we do for transform animations on
the compositor.  To unthrottle the transform animations properly, we need to
update UpdateLastTransformSyncTime each time we compose the style for the
animations instead of updating it when we send the transform animation to the
compositor.  That's because display item for transform is built even while we
are throttling the transform animations for some reasons, so if we updated the
last transform sync time there, the time will not match what it should be.

MozReview-Commit-ID: GwMzJqUlzd2

https://hg.mozilla.org/mozilla-central/rev/fa94f7205173d34f23975c6af9cb95237b28c8b8

Related https://bugzilla.mozilla.org/show_bug.cgi?id=1424506

[DanielRuf]

Summoning @hiikezoe ✨

[DanielRuf]

cross referencencing https://bugzilla.mozilla.org/show_bug.cgi?id=1437272

[DanielRuf]

For other testers, try mozregression https://github.com/mozilla/mozregression/releases

[DanielRuf]

Can anyone confirm that this still happens in Firefox 59 and 60? https://bugzilla.mozilla.org/show_bug.cgi?id=1425213#c26

[ncoden]

This is still present in Firefox Nightly 60.0a1 (2018-02-09)

[ncoden]

I can reproduce the all of the following issues under Firefox 60.0a1 (BuildId:20180210220139) on macOS 10.13.4.

• http://jsfiddle.net/mediaxtend/t4svvhsz/embedded/result,html,css,js/
• https://foundation.zurb.com/sites/docs/orbit.html
• http://getbootstrap.com/docs/3.3/javascript/#carousel

See: http://www.giphy.com/gifs/3o7WIDHwT2eOxa0RG0

[DanielRuf]

New binaries at https://bugzilla.mozilla.org/show_bug.cgi?id=1437272#c8

At least transitions are often used and the behavior before Firefox 58 was totally ok.

Not sure why the change was done.

[DanielRuf]

https://bugzilla.mozilla.org/show_bug.cgi?id=1437272#c8 FF 60a1 seems to be fine.

[ncoden]

Cannot be reproduced it anymore with Firefix 60. I guess this was a browser bug with animations and that we couldn't resove it. Closing this issue.

[DanielRuf]

It was/will be resolved in Firefox 60, see https://bugzilla.mozilla.org/show_bug.cgi?id=1437272#c38 ;-)

[DanielRuf]

And yes it was a browser bug / regression on their side.