Animation rendering issue on Google's sign in page

NEW
Unassigned

Status

()

Core
Graphics
P3
normal
a month ago
25 days ago

People

(Reporter: 4567.angel, Unassigned)

Tracking

56 Branch
x86_64
Windows
Points:
---

Firefox Tracking Flags

(firefox57 wontfix)

Details

(Whiteboard: [gfx-noted])

Attachments

(1 attachment)

(Reporter)

Description

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

Updated

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
Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: [gfx-noted]
You need to log in before you can comment on or make changes to this bug.