- From: Alrik Wendel via GitHub <sysbot+gh@w3.org>
- Date: Fri, 07 Oct 2022 08:31:37 +0000
- To: public-css-archive@w3.org
**TEST CASE FILE** (use 4k or other high resolution display ideally) Here is a test case that shows the problem and why existing CSS properties cannot handle this case: [](https://jsfiddle.net/9wsry1g0/) This renders some procedural graphics intensive content and starts a "zooming out" animation. It uses transform scale and will-change:transform in order to rasterise the content and "make it smooth" Chrome and Firefox both handle it in slightly different, but both insufficient ways: Chrome respects the will-change:transform property which leads to the animation running smooth. Yet, it locks the resolution and the start resolution which leads to a GPU memory explosion and henceforth it creates visual artifacts and doesn't render a lot of the content when zoomed out. Firefox seems to ignore the will-change:transform property. This leads to it not having a GPU overflow, it shows all content but because it re-rasterises on every frame, it has a very low framerate (15fps or worse). This "zooming" out effect would be a very common scenario in something like Figma / Design tool, Maps or Whiteboarding tool. The only way to achieve running this smooth in a 4k display, would be to lower the resolution during the "zooming" out. Ideally also in conjunction with locking the raster resolution (using will-change: transform) -- GitHub Notification of comment by Awendel Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7848#issuecomment-1271288094 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 7 October 2022 08:31:39 UTC