On Wednesday, July 13, 2022 at 3:54:28 AM UTC+2 Khushal Sagar wrote:
> On Mon, Jul 11, 2022 at 11:40 AM Yoav Weiss <yoavwe...@chromium.org> > wrote: > >> >> >> On Fri, Jul 8, 2022 at 7:22 PM Khushal Sagar <khushalsa...@chromium.org> >> wrote: >> >>> Contact emailskhushalsa...@chromium.org, vmp...@chromium.org >>> >>> Explainer >>> https://github.com/WICG/shared-element-transitions/blob/main/overflow-on-replaced-elements.md >>> https://github.com/w3c/csswg-drafts/issues/7058 >>> >>> Specificationhttps://drafts.csswg.org/css-overflow/#overflow-properties >>> >>> Summary >>> >>> This change allows developers to use the existing `overflow` property >>> with replaced elements that paint outside the content-box. Paired with >>> `object-view-box` this can be used to create an image with a custom glow or >>> shadow applied, with proper ink-overflow behavior like a CSS shadow would >>> have. >>> >>> Blink componentBlink>CSS >>> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> >>> >>> TAG reviewhttps://github.com/w3ctag/design-reviews/issues/750 >>> >>> TAG review statusPending >>> >>> Risks >>> Interoperability and Compatibility >>> >>> This feature changes the behaviour of the existing overflow property on >>> replaced elements (img, video, canvas). Currently `overflow:visible` in a >>> developer stylesheet on such elements is ignored during paint and the >>> content is clipped to the element's content-box. With this feature, >>> `overflow:visible` will result in content outside the element's content-box >>> to paint as ink overflow. We've collected use counter data to measure the >>> number of sites which could be affected by this. The use counter data >>> collected over 1 week of a stable release (M102) is as follows. We >>> collected 2 different counters explained below. * The first measures any >>> instance where overflow is explicitly set from developer styles to visible. >>> The percentage of page loads with this is 2.16%. * The second measures the >>> above instances but only includes the cases with object-fit set to cover or >>> none or object-position set to any value other than the default (50% 50%). >>> The rationale behind this counter is to exclude cases which can not cause >>> overflow (such as object-fit:contain), even if overflow is set to visible. >>> The percentage of page loads with this is 0.017%. >>> >> >> That's not nothing. Any idea what breakage may look like? >> Can we maybe collect histograms on *how much* overflow would occur in >> those cases? (maybe with ClusterTelemetry initially, to get a rough idea in >> the lab) >> > > I ran an analysis on CT using top 100k sites for desktop and top 10k sites > on mobile. The raw numbers are here: desktop > <https://docs.google.com/spreadsheets/d/1kKWq8kqZOfCXqiHaiamYNDdTs5x1_YJfDTnAgXOIwaE/edit#gid=0> > > and mobile > <https://docs.google.com/spreadsheets/d/1SrNyrEe4yzCOIxqNOlNgCk8O58NqqoBlBTd4Wn_gKCc/edit#gid=0>, > > and the rough patch > <https://chromium-review.googlesource.com/c/chromium/src/+/3749485> to > collect this data. The highlights from the analysis are below: > > - The number of sites which override the default CSS to allow overflow > *and* also had overflow during painting was 13 out of 10k on mobile and 39 > out of 63k on desktop (only 63k sites yielded results out of 100k). > > - I measured the percentage of area painted outside the content box > out of the total painted area. The highest was 88% on desktop and 70% on > mobile. > > I'm not sure what that means in practice. Can you elaborate? Have you looked at extreme cases to see the impact there? > I manually went through ~10 sites on both desktop and mobile. For the ones > which repro-ed, the breakage was losing rounded corners because > border-radius doesn't clip the content if 'overflow' is 'visible'. In fact > a few sites had the same code, likely coming from customerly > <https://www.customerly.io/> based on class names and the UX. There was > one case where an image (used in the background) had object-fit:cover and > overflowed outside the content box now. I've attached screenshots for both > of these. > > Overall I didn't see any case where the overflow occluded any other > content on the page. > That's reassuring! :) > > >> >> >>> >>> *Gecko*: No signal ( >>> https://github.com/mozilla/standards-positions/issues/659) >>> >>> *WebKit*: No signal ( >>> https://lists.webkit.org/pipermail/webkit-dev/2022-June/032317.html) >>> >>> *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? >>> >>> Debuggability >>> >>> This is a CSS property which can be debugged in the devtools style panel >>> similar to other CSS properties. >>> >>> Will this feature be supported on all six Blink platforms (Windows, Mac, >>> Linux, Chrome OS, Android, and Android WebView)?Yes >>> >>> Is this feature fully tested by web-platform-tests >>> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> >>> ?Yes >>> >>> Flag nameCSSOverflowForReplacedElements >>> >>> *Note: Because of the compat risk with this feature, this flag can be >>> controlled via Finch. This will allow us to rollback with a server-side >>> config change if needed.* >>> >>> Requires code in //chrome?False >>> >>> Tracking bug >>> https://bugs.chromium.org/p/chromium/issues/detail?id=1321217 >>> >>> Estimated milestones >>> >>> M105 >>> >>> Anticipated spec changes >>> >>> N/A >>> >>> Link to entry on the Chrome Platform Status >>> https://chromestatus.com/feature/5137515594383360 >>> >>> Links to previous Intent discussionsIntent to prototype: >>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAMLuWUykJWEAqVzcUy15fpBNdA68508Mny_1z--FCBKXRTZOFQ%40mail.gmail.com >>> >>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/camluwuykjweaqvzcuy15fpbnda68508mny_1z--fcbkxrtz...@mail.gmail.com> >>> >>> >>> This intent message was generated by Chrome Platform Status >>> <https://chromestatus.com/>. >>> >>> -- >>> 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/CAMLuWUze8JV6twLfhPBwkXj_UBMGApU048OdY33hYQn_KDj2rA%40mail.gmail.com >>> >>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAMLuWUze8JV6twLfhPBwkXj_UBMGApU048OdY33hYQn_KDj2rA%40mail.gmail.com?utm_medium=email&utm_source=footer> >>> . >>> >> -- 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/7e6d8f9f-cd85-4730-8d0c-01715e4418bbn%40chromium.org.
