New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 784088 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Nov 2017
Cc:
Components:
EstimatedDays: ----
NextAction: 2017-11-27
OS: Chrome
Pri: 2
Type: Bug



Sign in to add a comment

Text not rendering on keyframe animations with perspective & transforms inside a clipped container

Reported by toby.roworth@gmail.com, Nov 11 2017

Issue description

UserAgent: Mozilla/5.0 (X11; CrOS x86_64 10106.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3261.0 Safari/537.36
Platform: 10106.0.0 (Official Build) dev-channel cave

Steps to reproduce the problem:
1. Load attached file, a css keyframe animation will fire. Ensure cursor is not in browser window.
2. A grey box will move up the screen
3. Reload the page, and whilst the grey box is moving, move the cursor over it
4. The text will appear

What is the expected behavior?
Text should be rendered the first time the animation is played.

What went wrong?
Text is not rendered the first time the animation is played, unless the cursor is moved above it or an element is hovered over in dev tools.

When the animation is scrubbed backwards using the DevTools animation panel, the text will be displayed, regardless of whether it was displayed earlier.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 64.0.3261.0  Channel: dev
OS Version: 10106.0.0
Flash Version: Shockwave Flash 27.0 r0

This seems to be based on whether the text starts in the bounding box of its parent when the animation is started. For instance, setting a keyframe at the start with a translateY(0px) will stop this bug happening.

In the attached file, removing any of the following will fix the issue:
- #crawl.transform rotateX
- #crawl.transform translateZ
- #container.overflow hidden
 
minTransform.html
1.2 KB View Download
noCursor.png
74.4 KB View Download
withCursor.png
168 KB View Download
Components: -Blink>Animation Blink>Compositing>Transform3D
Labels: Needs-Feedback
Clicky test case: https://jsfiddle.net/w1xgy1r9/

I tested in Windows 10 with Chrome 62 and Chrome 64 and could not reproduce the problem. The text rendered in all cases (cursor in or out of window).

Can you please confirm the browser/OS combination you have. Also, if the bug continues to reproduce for you, can you go to chrome://gpu/ and attach the saved version of that page here.
NextAction: 2017-11-27
There was a bug in that was recently fixed related to perspective transform content not appearing, which might be related to this. It was recently fixed (late last week).

I am curious whether the problem persists past the next update. Please try that when you can and let us know.
Just to confirm the test case works, I tried the jsfiddle and get the same problem. If I move the mouse at all after clicking run (including over the run button), the text displays, if I keep it still it doesn't.

I'm on Chrome 64 (dev channel) on ChromeOS

info from chrome://version:

Google Chrome	64.0.3261.0 (Official Build) dev (64-bit)
Revision	0
Platform	10106.0.0 (Official Build) dev-channel cave
Firmware Version	Google_Cave.7820.329.0
Customisation ID	ASUS-CAVE
ARC	4435649
JavaScript	V8 6.4.221

I'll check again after the next update.

Project Member

Comment 4 by sheriffbot@chromium.org, Nov 13 2017

Cc: mikelawther@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "mikelawther@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
chrome://gpu attached
gpu.html
93.3 KB View Download
Thanks Toby.

Hopefully the next update will resolve this.
A new build came through today, which seems to resolve this issue

64.0.3270.0 (Official Build) dev (64-bit)

Thanks guys
Status: WontFix (was: Unconfirmed)
Thanks for confirming the fix. I'll close this bug.
The NextAction date has arrived: 2017-11-27

Sign in to add a comment