[csswg-drafts] [css-transform] Provide way to scale internal resolution of layers (#7848)

Awendel has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transform] Provide way to scale internal resolution of layers ==
**BACKGROUND**
Every year devices become higher and higher resolution (especially smartphones, most have very high dpi displays).
At the same time the scope and scale of what web apps can render (think Figma, data visualisation, ...) becomes larger and larger.
Moreover, the amount web users increases every year with largest growth coming from developing countries where sadly the majority have access to only low end hardware.

**THE PROPOSAL**
Offer a way for a given layer to adjust its internal resolution by a multiplying factor. The default of course should be "1" or "100%" which is the resolution that is currently chosen. If I set the value to 0.5 or 50% it should half the internal resolution of the layer (and hence put less pressure on the rasterizer hardware and gpu memory etc).
The CSS property could be named "resolution", "raster-scale" or "pixel-density" and units should be normalized floats or percentage.

**USE CASES**
- make graphics intensive animation run smooth (60fps) even on low end devices, by temporarily lowering the resolution for the duration of the animation
- offer way for low end devices to use graphics intensive application with useable framerates
( similar to how common it is to lower the resolution in gaming, especially on 4K displays etc)

**COMPATIBILITY & EASE OF INTEGRATION**
The proposed property would integrate very well with the following existing properties:
- transform, esp. scale
- will-change, especially when set to "transform". Will-change "locks" the internal resolution of a layer already, but it doesn't provide a way to lower it, especialling when "zooming" out. It is currently now enough to ensure every animation runs smooth. I will attach some test cases to prove this and show the only way to run it smooth would be to lower the resolution.

Moreover, it would be very simple to integrate into the existing render logic of browsers. Since there already is a mechanism to calculate the layer resolution (multiplying screen resolution by devicePixelRation and transform:scale), it would be just another multiplier in that computation.

**CURRENT (LACK OF) ALTERNATIVES**
The only way to achieve this currently is by pushing all render logic to canvas, where one can control the resolution.
Sadly this has led to a situation where all graphics intensive application use a custom WebGL render stack (Figma etc),
even though all rendering could be done with plain HTML.
Plain HTML is also by nature more accessible and eases the barrier to entry for new developers.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7848 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:20:56 UTC