Animation rendering issue on Google's sign in page




a month ago
25 days ago


(Reporter: 4567.angel, Unassigned)


56 Branch

Firefox Tracking Flags

(firefox57 wontfix)


(Whiteboard: [gfx-noted])


(1 attachment)



a month ago
Created attachment 8918380 [details]
Google Sign in - keyframes bug.png

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20171002220106

Steps to reproduce:

I went to Google's sign in page via YouTube. If you are already signed in, you can choose "Add account" > "Use another account". I entered my email address and clicked "NEXT".

If your interent is too fast, you should disable your internet connection before clicking "NEXT" to observe the bug.

Actual results:

an orange bar appeared that moved from left to right repeatedly while shrinking and growing alternately. However, after 2 seconds dozens of tiny orange bars appeared behind the bar (see screenshot).

It looks like the repainted area is too small.

I checked in the dev tools that it is a @keyframes animation of a <span> inside a <div>. The bug appeared on Windows 7 in Firefox 56 x86 and x64. Hardware acceleration was disabled.

Expected results:

Only one bar moves from left to right.

This is the @keyframes css code of the <div>:

0% {
    -moz-transform: translateX(-145.166611%);
    transform: translateX(-145.166611%);
20% {
    -moz-animation-timing-function: cubic-bezier(.5,0,.701732,.495819);
    animation-timing-function: cubic-bezier(.5,0,.701732,.495819);
    -moz-transform: translateX(-145.166611%);
    transform: translateX(-145.166611%);
59.15% {
    -moz-animation-timing-function: cubic-bezier(.302435,.381352,.55,.956352);
    animation-timing-function: cubic-bezier(.302435,.381352,.55,.956352);
    -moz-transform: translateX(-61.495191%);
    transform: translateX(-61.495191%);
100% {
    -moz-transform: translateX(55.444446%);
    transform: translateX(55.444446%);

Here's the css @keyframes code of the <span> inside the <div>:

0% {
    -moz-transform: scaleX(.08);
    transform: scaleX(.08);
36.65% {
    -moz-animation-timing-function: cubic-bezier(.334731,.124820,.785844,1);
    animation-timing-function: cubic-bezier(.334731,.124820,.785844,1);
    -moz-transform: scaleX(.08);
    transform: scaleX(.08);
69.15% {
    -moz-animation-timing-function: cubic-bezier(.06,.11,.6,1);
    animation-timing-function: cubic-bezier(.06,.11,.6,1);
    -moz-transform: scaleX(.661479);
    transform: scaleX(.661479);
100% {
    -moz-transform: scaleX(.08);
    transform: scaleX(.08);

(This code is probably copyrighted!)


a month ago
Component: Untriaged → Layout
Product: Firefox → Core

Comment 1

a month ago
Brian: I wasn't able to reproduce this bug on my Mac. Can you try to repro? Thx!
status-firefox57: --- → wontfix
Flags: needinfo?(bbirtles)
Priority: -- → P3
Yes, I've seen this many times before on Windows 10. I just assumed it was the intended affect but given that code it appears it's not!

I expect this is an invalidation bug so I'm updating the component to graphics for now and updating the platform too.
Component: Layout → Graphics
Flags: needinfo?(bbirtles)
OS: Unspecified → Windows
Hardware: Unspecified → x86_64
CC'ing Matt and Bas in case they know anything about what might cause this.
Summary: keyframes animation rendering issue on Google's sign in page → Animation rendering issue on Google's sign in page
Ever confirmed: true
Whiteboard: [gfx-noted]
You need to log in before you can comment on or make changes to this bug.