[blink-dev] Intent to Prototype and Ship: Standardized CSS zoom

['Yotam Hacohen' via blink-dev]

Contact emailsyo...@google.com

ExplainerNone

Specificationhttps://github.com/w3c/csswg-drafts/pull/9699

Design docs
https://docs.google.com/document/d/1AcnDShjT-kEuRaMchZPm5uaIgNZ4OiYtM4JI9qiV8Po/edit

Summary

Aligns the existing implementation of the previously non-standard CSS zoom
property to align with the new standard. This changes various JS APIs to
align with the spec (see design doc), change zoom to apply to iframes, and
change it to apply to all inherit all length properties (currently it only
changes inherited font-size)

Blink componentBlink>Paint


TAG reviewNone

TAG review statusPending

Risks

Interoperability and Compatibility

There is web compatibility risk for these changes. However, previous
research indicates broken content due to unexpected changes of the JS APIs
is very unlikely, since: * The changes to the JS API simply change the
coordinate space of the responses, not the syntax or what APIs are
available. * Most pages found during the research didn't appear to use CSS
zoom at all and the ones that did only relied on the visual effect, not JS
APIs. It's possible some pages will be broken by the changes to inherited
properties other than font-size, or applying zoom to sub-frames, but based
on previous research, those are very likely to be minor visual changes that
don't break fundamental user interaction with the site. None of the sites
reviewed contained iframes underneath a zoomed ancestor. We will use direct
outreach to avoid any broken features in Office 365 or the Gmail native
mobile app


*Gecko*: No signal Filed a standard position request:
https://github.com/mozilla/standards-positions/issues/977

*WebKit*: No signal Filed a standard position request:
https://github.com/WebKit/standards-positions/issues/311

*Web developers*: Positive (
https://docs.google.com/document/d/1cmbXpjAcXAht2ufi7bNKy-rbVNveqaf0UzeYg_DIMNA/edit#heading=h.6sz4u73bikbd)
Research collected as part of the previous attempt to remove CSS zoom
demonstrated several use cases.

*Other signals*:

WebView application risks

See Interoperability and Compatibility above


Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac,
Linux, ChromeOS, Android, and Android WebView)?No

Is this feature fully tested by web-platform-tests

?Yes

All JS APIs affected by zoom are tested with the following wpt tests:
https://wpt.fyi/results/css/cssom-view/offsetTop-offsetLeft-with-zoom.html?label=master&label=experimental&aligned&q=cssom-view%2FoffsetTop-offsetLeft-with-zoom.html
https://wpt.fyi/results/css/cssom-view/client-props-zoom.html?label=master&label=experimental&aligned
https://wpt.fyi/results/css/cssom-view/getBoundingClientRect-zoom.html?label=master&label=experimental&aligned
https://wpt.fyi/results/css/cssom-view/getClientRects-zoom.html?label=master&label=experimental&aligned
https://wpt.fyi/results/css/cssom-view/scroll-zoom.html?label=master&label=experimental&aligned
https://wpt.fyi/results/intersection-observer/zoom-scaled-target.html?label=experimental&label=master&aligned

Flag name on chrome://flagsStandardizedBrowserZoom

Finch feature nameStandardizedBrowserZoom

Requires code in //chrome?False

Sample linkshttps://jsbin.com/wasafateko/edit?html,css,js,output

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5198254868529152

This intent message was generated by Chrome Platform Status
.

-- 
You received this message because you are subscribed to the Google Groups 
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to blink-dev+unsubscr...@chromium.org.
To view this discussion on the web visit 
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAOtuiYKjC9Gt%2BgXwWNT_hJneBMa053RizCX5Xj5p_07CVLXkA%40mail.gmail.com.

Re: [blink-dev] Intent to Prototype and Ship: Standardized CSS zoom

['Yotam Hacohen' via blink-dev]

Hey Dominic and thanks for the input!

On Sunday, February 4, 2024 at 7:34:53 PM UTC-8 Domenic Denicola wrote:

It's always exciting to move such an old feature from nonstandard to 
standardized!

On Sat, Feb 3, 2024 at 4:18 AM 'Yotam Hacohen' via blink-dev <
blin...@chromium.org> wrote:

Contact emailsyo...@google.com

ExplainerNone


FWIW, I think the contents of https://github.com/w3c/csswg-drafts/pull/9699 
and https://drafts.csswg.org/css-viewport/#zoom-property are probably a 
good enough explainer. It might be a good idea to update ChromeStatus to 
link to them.

Added those. Thanks! 

 



Specificationhttps://github.com/w3c/csswg-drafts/pull/9699

Design docs
https://docs.google.com/document/d/1AcnDShjT-kEuRaMchZPm5uaIgNZ4OiYtM4JI9qiV8Po/edit

Summary

Aligns the existing implementation of the previously non-standard CSS zoom 
property to align with the new standard. This changes various JS APIs to 
align with the spec (see design doc), change zoom to apply to iframes, and 
change it to apply to all inherit all length properties (currently it only 
changes inherited font-size)

Blink componentBlink>Paint 
<https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3EPaint>

TAG reviewNone

TAG review statusPending


Probably this fits under the first exception here 
<https://www.chromium.org/blink/guidelines/api-owners/process-exceptions/>.
 



Risks

Interoperability and Compatibility

There is web compatibility risk for these changes. However, previous 
research indicates broken content due to unexpected changes of the JS APIs 
is very unlikely, since: * The changes to the JS API simply change the 
coordinate space of the responses, not the syntax or what APIs are 
available. * Most pages found during the research didn't appear to use CSS 
zoom at all and the ones that did only relied on the visual effect, not JS 
APIs. It's possible some pages will be broken by the changes to inherited 
properties other than font-size, or applying zoom to sub-frames, but based 
on previous research, those are very likely to be minor visual changes that 
don't break fundamental user interaction with the site. None of the sites 
reviewed contained iframes underneath a zoomed ancestor. We will use direct 
outreach to avoid any broken features in Office 365 or the Gmail native 
mobile app


Can you give more quantitative details on this previous research? E.g. when 
you say "most pages", is that 3/5 pages? 99/100?

  Sampling pages from the doc, I couldn't find even one example of a page 
that uses zoom in a way that will change it's behavior (i.e. - calling 
GetBoundingClientRect or GetBoundingRects on an element with CSS zoom). I 
also compared those sites visually side by side on a stable version of 
chrome and a local version with the planned changes in effect, and couldn't 
see any change.  


Regarding the direct outreach targets you mentioned, are they already 
fixed, or do they need more time to update?

We have reached out to the relevant people.  


What is your rollout plan for this change---straight to 100% with a 
killswitch, or a gradual rollout, or...?

Our plan is to go straight to 100% with a killswitch.  




*Gecko*: No signal Filed a standard position request: 
https://github.com/mozilla/standards-positions/issues/977

*WebKit*: No signal Filed a standard position request: 
https://github.com/WebKit/standards-positions/issues/311

*Web developers*: Positive (
https://docs.google.com/document/d/1cmbXpjAcXAht2ufi7bNKy-rbVNveqaf0UzeYg_DIMNA/edit#heading=h.6sz4u73bikbd)
 
Research collected as part of the previous attempt to remove CSS zoom 
demonstrated several use cases.

*Other signals*:

WebView application risks

See Interoperability and Compatibility above 


Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac, 
Linux, ChromeOS, Android, and Android WebView)?No

Is this feature fully tested by web-platform-tests 
<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>
?Yes

All JS APIs affected by zoom are tested with the following wpt tests: 
https://wpt.fyi/results/css/cssom-view/offsetTop-offsetLeft-with-zoom.html?label=master&label=experimental&aligned&q=cssom-view%2FoffsetTop-offsetLeft-with-zoom.html
 
https://wpt.fyi/results/css/cssom-view/client-props-zoom.html?label=master&label=experimental&aligned
 
https://wpt.fyi/results/css/cssom-view/getBoundingClientRect-zoom.html?label=master&label=experimental&aligned
 
https://wpt.fyi/results/css/cssom-view/getClientRects-zoom.html?label=master&label=experimental&aligned
 
https://wpt.fyi/results/css/cssom-view/scroll-zoom.html?label=master&label=experimental&aligned
 
https://wpt.fyi/results/intersection-observer/zoom-scaled-target.html?label=experimental&label=master&aligned


Are the non-JS aspects of the API also te

Re: [blink-dev] Intent to Prototype and Ship: Standardized CSS zoom

['Yotam Hacohen' via blink-dev]

Hey Gregg. Thanks for the input!
devicePixelRatio indeed never changes in webkit. It is just mentioned as 
functions that are already implemented in webkit with in a way that is 
aligned with the new spec, but there is no change to the webkit code. 

On Monday, February 5, 2024 at 10:34:03 AM UTC-8 Gregg Tavares wrote:

> The link to the specification: 
> https://github.com/w3c/csswg-drafts/pull/9699 list behaviors and then says
>
> > Web compat analysis: the above is what is already implemented in WebKit 
> and Chromium browsers
>
> But one of the behaviors listed is 
>
> > devicePixelRatio is affected by zoom inherited from an ancestor frame
>
> devicePixelRatio never changes in WebKit. 
>
>
> On Fri, Feb 2, 2024 at 11:18 AM 'Yotam Hacohen' via blink-dev <
> blin...@chromium.org> wrote:
>
>> Contact emailsyo...@google.com
>>
>> ExplainerNone
>>
>> Specificationhttps://github.com/w3c/csswg-drafts/pull/9699
>>
>> Design docs
>> https://docs.google.com/document/d/1AcnDShjT-kEuRaMchZPm5uaIgNZ4OiYtM4JI9qiV8Po/edit
>>
>> Summary
>>
>> Aligns the existing implementation of the previously non-standard CSS 
>> zoom property to align with the new standard. This changes various JS APIs 
>> to align with the spec (see design doc), change zoom to apply to iframes, 
>> and change it to apply to all inherit all length properties (currently it 
>> only changes inherited font-size)
>>
>> Blink componentBlink>Paint 
>> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3EPaint>
>>
>> TAG reviewNone
>>
>> TAG review statusPending
>>
>> Risks
>>
>> Interoperability and Compatibility
>>
>> There is web compatibility risk for these changes. However, previous 
>> research indicates broken content due to unexpected changes of the JS APIs 
>> is very unlikely, since: * The changes to the JS API simply change the 
>> coordinate space of the responses, not the syntax or what APIs are 
>> available. * Most pages found during the research didn't appear to use CSS 
>> zoom at all and the ones that did only relied on the visual effect, not JS 
>> APIs. It's possible some pages will be broken by the changes to inherited 
>> properties other than font-size, or applying zoom to sub-frames, but based 
>> on previous research, those are very likely to be minor visual changes that 
>> don't break fundamental user interaction with the site. None of the sites 
>> reviewed contained iframes underneath a zoomed ancestor. We will use direct 
>> outreach to avoid any broken features in Office 365 or the Gmail native 
>> mobile app
>>
>>
>> *Gecko*: No signal Filed a standard position request: 
>> https://github.com/mozilla/standards-positions/issues/977
>>
>> *WebKit*: No signal Filed a standard position request: 
>> https://github.com/WebKit/standards-positions/issues/311
>>
>> *Web developers*: Positive (
>> https://docs.google.com/document/d/1cmbXpjAcXAht2ufi7bNKy-rbVNveqaf0UzeYg_DIMNA/edit#heading=h.6sz4u73bikbd)
>>  
>> Research collected as part of the previous attempt to remove CSS zoom 
>> demonstrated several use cases.
>>
>> *Other signals*:
>>
>> WebView application risks
>>
>> See Interoperability and Compatibility above 
>>
>>
>> Debuggability
>>
>> None
>>
>> Will this feature be supported on all six Blink platforms (Windows, Mac, 
>> Linux, ChromeOS, Android, and Android WebView)?No
>>
>> Is this feature fully tested by web-platform-tests 
>> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>
>> ?Yes
>>
>> All JS APIs affected by zoom are tested with the following wpt tests: 
>> https://wpt.fyi/results/css/cssom-view/offsetTop-offsetLeft-with-zoom.html?label=master&label=experimental&aligned&q=cssom-view%2FoffsetTop-offsetLeft-with-zoom.html
>>  
>> https://wpt.fyi/results/css/cssom-view/client-props-zoom.html?label=master&label=experimental&aligned
>>  
>> https://wpt.fyi/results/css/cssom-view/getBoundingClientRect-zoom.html?label=master&label=experimental&aligned
>>  
>> https://wpt.fyi/results/css/cssom-view/getClientRects-zoom.html?label=master&label=experimental&aligned
>>  
>> https://wpt.fyi/results/css/cssom-view/scroll-zoom.html?label=master&label=experimental&aligned
>>  
>> https://wpt.fyi/results/intersection-observer/zoom-scaled-target.html?label=experimental&label=master&aligned
>>
>> Flag

Re: [blink-dev] Intent to Prototype and Ship: Standardized CSS zoom

['Yotam Hacohen' via blink-dev]

On Thursday, February 8, 2024 at 6:46:00 PM UTC-8 Domenic Denicola wrote:

On Fri, Feb 9, 2024 at 10:55 AM Yotam Hacohen  wrote:

Hey Dominic and thanks for the input!

On Sunday, February 4, 2024 at 7:34:53 PM UTC-8 Domenic Denicola wrote:

It's always exciting to move such an old feature from nonstandard to 
standardized!

On Sat, Feb 3, 2024 at 4:18 AM 'Yotam Hacohen' via blink-dev <
blin...@chromium.org> wrote:

Contact emailsyo...@google.com

ExplainerNone


FWIW, I think the contents of https://github.com/w3c/csswg-drafts/pull/9699 
and https://drafts.csswg.org/css-viewport/#zoom-property are probably a 
good enough explainer. It might be a good idea to update ChromeStatus to 
link to them.

Added those. Thanks! 

 



Specificationhttps://github.com/w3c/csswg-drafts/pull/9699

Design docs
https://docs.google.com/document/d/1AcnDShjT-kEuRaMchZPm5uaIgNZ4OiYtM4JI9qiV8Po/edit

Summary

Aligns the existing implementation of the previously non-standard CSS zoom 
property to align with the new standard. This changes various JS APIs to 
align with the spec (see design doc), change zoom to apply to iframes, and 
change it to apply to all inherit all length properties (currently it only 
changes inherited font-size)

Blink componentBlink>Paint 
<https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3EPaint>

TAG reviewNone

TAG review statusPending


Probably this fits under the first exception here 
<https://www.chromium.org/blink/guidelines/api-owners/process-exceptions/>.
 



Risks

Interoperability and Compatibility

There is web compatibility risk for these changes. However, previous 
research indicates broken content due to unexpected changes of the JS APIs 
is very unlikely, since: * The changes to the JS API simply change the 
coordinate space of the responses, not the syntax or what APIs are 
available. * Most pages found during the research didn't appear to use CSS 
zoom at all and the ones that did only relied on the visual effect, not JS 
APIs. It's possible some pages will be broken by the changes to inherited 
properties other than font-size, or applying zoom to sub-frames, but based 
on previous research, those are very likely to be minor visual changes that 
don't break fundamental user interaction with the site. None of the sites 
reviewed contained iframes underneath a zoomed ancestor. We will use direct 
outreach to avoid any broken features in Office 365 or the Gmail native 
mobile app


Can you give more quantitative details on this previous research? E.g. when 
you say "most pages", is that 3/5 pages? 99/100?

  Sampling pages from the doc, I couldn't find even one example of a page 
that uses zoom in a way that will change it's behavior (i.e. - calling 
GetBoundingClientRect or GetBoundingRects on an element with CSS zoom). I 
also compared those sites visually side by side on a stable version of 
chrome and a local version with the planned changes in effect, and couldn't 
see any change.  


This sounds like a good sign, but I'd still appreciate some numbers. So 
it's zero out of how many?

I checked the first 15 websites in the list on this 
doc: 
https://docs.google.com/document/d/1cmbXpjAcXAht2ufi7bNKy-rbVNveqaf0UzeYg_DIMNA/edit#heading=h.6sz4u73bikbd


 


Regarding the direct outreach targets you mentioned, are they already 
fixed, or do they need more time to update?

We have reached out to the relevant people.  


So, you have contacted them, but they still need more time to update? Do 
you have an estimate for when they will be updated?

We already got a response from the gmail team, and everything is ok there, 
we even have a jsfiddle example <https://jsfiddle.net/v167sj9p/> that shows 
that the visual aspect doesn't change for them. Still waiting for a 
response from the Office 365, if we don't get a response in the next week 
we will reach out again for a better defined timeline.  



What is your rollout plan for this change---straight to 100% with a 
killswitch, or a gradual rollout, or...?

Our plan is to go straight to 100% with a killswitch.  




*Gecko*: No signal Filed a standard position request: 
https://github.com/mozilla/standards-positions/issues/977

*WebKit*: No signal Filed a standard position request: 
https://github.com/WebKit/standards-positions/issues/311

*Web developers*: Positive (
https://docs.google.com/document/d/1cmbXpjAcXAht2ufi7bNKy-rbVNveqaf0UzeYg_DIMNA/edit#heading=h.6sz4u73bikbd)
 
Research collected as part of the previous attempt to remove CSS zoom 
demonstrated several use cases.

*Other signals*:

WebView application risks

See Interoperability and Compatibility above 


Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac, 
Linux, ChromeOS, Android, and Android WebView)?No

Is this feature fully tested by web-platform-tests 
<https://chromium.googlesource.com/chromium/src/+/main

[blink-dev] Web-Facing Change PSA: Lazy load scroll margin for iframes

['Yotam Hacohen' via blink-dev]

Contact emailsyo...@google.com

Specificationhttps://html.spec.whatwg.org/#lazy-load-root-margin

Design docs
https://gist.github.com/tcaptan-cr/bf0ac25f77cb6b6c58c916e6577d91c3

Summary

Changes the lazy load intersection observer's init dictionary to use a
scrollMargin instead of a rootMargin. This allows lazy loading iframes
contained inside CSS scrollers, like carousels, to load as expected when
near the viewport instead of the current behavior where these iframes load
when at least one pixel is intersecting the viewport.


Blink componentBlink>Paint


Search tagslazyload ,
scrollmargin 

TAG reviewNone

TAG review statusNot applicable

Risks


Interoperability and Compatibility

Overall low as scroll margin also applies to the root element thus not
affecting lazy loading iframes that are currently loading with just a root
margin.


*Gecko*: No signal

*WebKit*: No signal

*Web developers*: No signals

*Other signals*:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that
it has potentially high risk for Android WebView-based applications?

None


Debuggability

None


Will this feature be supported on all six Blink platforms (Windows, Mac,
Linux, ChromeOS, Android, and Android WebView)?Yes

Is this feature fully tested by web-platform-tests

?Yes

The following tests are testing this feature:
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller.html?label=master&label=experimental&aligned
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-far.html?label=master&label=experimental&aligned
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-horizontal-far.html?label=master&label=experimental&aligned
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-horizontal.html?label=master&label=experimental&aligned
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-nested-2.html?label=master&label=experimental&aligned
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-nested-3.html?label=master&label=experimental&aligned
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-nested-4.html?label=master&label=experimental&aligned
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-nested-5.html?label=master&label=experimental&aligned
https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-el


Flag name on chrome://flagsLazyLoadScrollMarginIframe

Finch feature nameLazyLoadScrollMarginIframe

Requires code in //chrome?False

Tracking bughttps://issues.chromium.org/issues/40943726

Estimated milestones

No milestones specified

Anticipated spec changes


None

Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/6292561099751424

This intent message was generated by Chrome Platform Status
.

-- 
You received this message because you are subscribed to the Google Groups 
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to blink-dev+unsubscr...@chromium.org.
To view this discussion on the web visit 
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAAOtuibiA-z7yxodefog2s%2BMv1ejOvTtZP6YV8ijvF1zzEHW4A%40mail.gmail.com.