CSS 3D transforms are glitchy and freeze badly
Reported by
trusktr@gmail.com,
Dec 21 2017
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; CrOS x86_64 9901.77.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.97 Safari/537.36 Platform: 9901.77.0 (Official Build) stable-channel caroline Example URL: http://disrupt.famo.us/periodic402/ Steps to reproduce the problem: 1. Visit that site 2. Press the play button 3. Wait for the animation to finish 4. Once it lets you play with it, press space bar to make it change layouts. 5. The problem is especially noticeable when the layout is the periodic table layout 6. Move the mouse around to rotate the cards, and notice a glitch 7. Also there is choppy performance (could it be a heavy memory leak?) What is the expected behavior? There should be no flickering. What went wrong? The cards flicker in Chrome, but not in Firefox. In Firefox, the application runs at constant framerate. In Chrome, the application freezes badly every few moments. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? Yes Not sure when, but this exact demo used to work fine and buttery smooth a year or two ago. Does this work in other browsers? Yes Chrome version: 62.0.3202.97 Channel: stable OS Version: 9901.77.0 Flash Version: CSS 3D needs more love.
,
Jan 14 2018
Can't reproduce on Linux M65 or Chrome OS (samus) M63
,
Jan 23 2018
Could this be related to https://bugs.chromium.org/p/chromium/issues/detail?id=799823 ?
,
Feb 1 2018
Assigning back to triage queue to answer comment 3.
,
Feb 1 2018
The test case uses requestAnimationFrame for the animation, and the JavaScript is minimized / obfuscated. We would encourage the use of Web Animations or CSS Animations or CSS Transitions for the animation. In particular, if the transform property is animated using native platform features, then the animation can be accelerated (moved off the main JavaScript thread.)
,
Feb 2 2018
If we want physics, how do we use "Web Animations or CSS Animations or CSS Transitions" to apply the physics values? The minified JS includes a layout system that CSS doesn't have. There's good reasons to use JS. The JS is supplying CSS transform:matrix3d values to the elements, which should not break rendering. My emotion is that closing the issue shows lack of interest to continue pushing the limits of what the browser can do as far as CSS3D goes, and that keeping it open would express interest in eventually having the problem solved. By the way, CSS can not do this: https://codepen.io/trusktr/pen/rpegZR JS is needed for that. That example is luckily not suffering from this bug, but can you imagine how frustrating it will be when a WebGL+CSS scene does experience it? I'll try to make a simpler example, with pure CSS because in this case the glitchy demo isn't complicated to make...
,
Feb 2 2018
If we just hack requestAnimationFrame to make it pause after some time, that should let us pause it in a state that has the glitch. I can post just that HTML as a plain example... |
||||
►
Sign in to add a comment |
||||
Comment 1 by vsu...@google.com
, Jan 10 2018