1408463 - Animation rendering issue on Google's sign in page

Status: NEW

(Core :: Graphics, defect, P3)

Description

[4567.angel]

Attachment: 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!)

Comment 1

[Jet Villegas (inactive)]

Brian: I wasn't able to reproduce this bug on my Mac. Can you try to repro? Thx!

Comment 2

[Brian Birtles (:birtles, Feb 26~ parental leave)]

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.

Comment 3

[Brian Birtles (:birtles, Feb 26~ parental leave)]

CC'ing Matt and Bas in case they know anything about what might cause this.