1234922 - Forbes welcome page's expanding-circle-background animation jumps around to the wrong position

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: screencast showing the bug

STR:
 1. Visit http://www.forbes.com/forbes/welcome/
    (This is the splash page that Forbes redirects you to, the first time you visit any article in some period of time.)

 2. Watch the expanding-circle animation behind the quote on the left.

 3. If you didn't see anything weird, reload.

ACTUAL RESULTS:
The circle sporadically jumps to the wrong position (down and to the right) while it is animating.

EXPECTED RESULTS: Circle should expand without jumping around.

Firefox Nightly & Release give me ACTUAL RESULTS, in a fresh profile.

(Using current Nightly: 46.0a1 (2015-12-23), and using current /usr/bin/firefox from Ubuntu 15.10 which is Firefox 43.)

Chrome Version 49.0.2587.3 dev (64-bit) gives EXPECTED RESULTS.

(This reproduces quite reliably for me. The only time I don't see this bug is when there's jank, e.g. because I'm compiling in the background -- but I think the only reason I don't see it then is because most of the animation frames are skipped altogether.)

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: partially-reduced testcase, as tarball

Here's a partially-reduced testcase, as a tarball (from a "Save as complete" on the page w/ the bug).

This has one empty HTML file, 4 js files (which populate the page), and one CSS file.

I verified that this testcase loads & reproduces the bug even if I'm offline, so this tarball is sufficient to trigger the bug -- i.e. to the extent that it grabs resources from forbes, those resources aren't involved with the bug here.

More testcase-reducing here is welcome & encouraged, if anyone would be up for it...

Comment 2

[Timothy Nikkel (:tnikkel)]

I don't seem to see any problem on Nightly on mac.

Comment 3

[Cosmin Muntean [:cmuntean], Ecosystem QA]

Hi,

I have tested this issue on latest Firefox (44.0.2) release, latest Nightly (47.0a1) build on Linux 14.04 x64. I have managed to reproduce it on Firefox release version using your provided test case and URL. The expanding  circle jumps to the wrong position.
In Nightly, using the provided test case, the expanding circle does not jumping around, works normally but with the provided URL, the circle has no animation. In Windows 7 x64 the circle animation looks normally on all Firefox versions.

Firefox: 44.0.2, Build ID: 20160210153822
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:44.0) Gecko/20100101 Firefox/44.0
Firefox: 47.0a1, Build ID: 20160224030246
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0

I have also tested on latest Beta (45.0b9 - Build ID: 20160223142613) using the provided test case and the expanding circle jumps to the wrong position as on the release version. But with the provided URL the circle has no animation, like Nightly (47.0a1).
In latest Aurora (46.0a2 - Build ID  20160225004014), the expanding  circle jumps to the wrong position just like on the release version, using both the test case and the URL.
I am unable to provide a more reduced test case.

Thanks,
Cosmin.

Comment 4

[MarjaE]

I have a strobe sensitivity and need to use a number of animation-blockers. In my case, these block the animation, but that leaves a blurry unreadable page.

Comment 5

[Daniel Holbert [:dholbert]]

@MarjaE, I think your issue (the blurry unreadable page from Forbes getting stuck at their welcome/adblock-detect step) is distinct from this bug here, and it's likely something you'll need to take up with Forbes (or with the developers of your animation-blockers).

Comment 6

[Daniel Holbert [:dholbert]]

This bug as-filed (about the animating circle snapping to the wrong place) is WORKSFORME now.

Forbes has changed their content to replace the animation shown in the screencast with a different one that doesn't end up at the wrong spot.  But I can still reproduce the issue using the attached testcase, *in old builds* (e.g. Nightly 2015-12-20).  I can't reproduce in today's Nightly, though.

(In fact, today's Nightly tends to skip past the animation and just show a static white circle a lot of the time. But when it does play the animation, I don't see any jumping.)

Comment 7

[Daniel Holbert [:dholbert]]

Fix range:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=9166484e331b685c8b7027bedcf328421029ac59&tochange=69ec3dc408a2a720cb2b8210fea33e3504aeec22

From that range, I'm betting this was fixed by bug 1244943 (a fix for 3d transform stuff), because my partially-reduced testcase here contains both "perspective" and "translate3d" in its [copious] CSS -- and the misrendering shown in the attached screencast looks like the sorts of rendering glitches that we've had from 3d transform issues in the patch.