Thanks for the link Chris. Unfortunately that does not work for my use-case as it's very important for my UX that the margins are perfectly balanced in the un-hover state. So as ugly as the layout shift is, it's actually better than always having the scrollbar impinging, visible or otherwise.
In that thread I see you also mentioned that work is being done to support cross platform overlay style bars for chromium (Awesome!). Can we just rollback this deprecation until that work is completed so myself and other users of this feature (however fringe) can continue using modern versions of chromium? Otherwise I'll have to stay on an old version of Electron/Chromium until the new overlay support is available. PS: In the other threads guidance, you recommend trying `visibility: hidden` in conjunction with `scrollbar-gutter: stable`, but the latter is not needed since visibility states don't affect layout. On Monday, July 17, 2023 at 4:17:45 PM UTC-6 Chris Harrelson wrote: > Hi Justin, > > You may find the suggestions in my email here > <https://groups.google.com/a/chromium.org/g/blink-dev/c/sxa8e66wQQQ/m/NitV9vxCAgAJ> > > helpful for adjustments for your situation. > > > On Tue, Jul 11, 2023 at 6:24 PM Justin Mayfield <[email protected]> wrote: > >> I'm being negatively affected by this change. I make an Electron app >> that contains many widget style windows that overlay the screen. My users >> place and size these windows with pixel perfect accuracy and I use custom >> scrollbars that are hidden unless `:hover` is true. In conjunction with >> `overflow: overlay` there was no layout shifting on all platforms before >> 114, but now my windows visibly jank quite badly when hovered because of >> the layout shift. >> >> Any suggestions on how I might achieve the pre 114 `overflow: overlay` >> behavior? >> >> Attached video demo of before [7] and after [8] behavior. >> On Friday, April 7, 2023 at 9:34:36 AM UTC-6 Yoav Weiss wrote: >> >>> On Wed, Apr 5, 2023 at 8:47 PM Chris Harrelson <[email protected]> >>> wrote: >>> >>>> >>>> >>>> On Tue, Apr 4, 2023 at 9:21 PM Yoav Weiss <[email protected]> wrote: >>>> >>>>> >>>>> >>>>> On Fri, Mar 31, 2023 at 2:37 AM Chris Harrelson <[email protected]> >>>>> wrote: >>>>> >>>>>> Contact [email protected] >>>>>> >>>>>> Specification >>>>>> https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto >>>>>> >>>>>> Summary >>>>>> >>>>>> Removes the overflow:overlay scrolling mode, and makes overlay a >>>>>> legacy alias of auto. overflow:overlay is the same as overflow:auto, >>>>>> except >>>>>> that it does not prevent content from extending into the scrollbar >>>>>> gutter, >>>>>> in cases where non-overlay OS scrollbars are present. (If overlay >>>>>> scrollbars are present, there is no effect.) Example: With >>>>>> overflow:overlay: https://output.jsbin.com/yujenuq/quiet With >>>>>> overflow:auto: https://output.jsbin.com/ruzogaf/quiet >>>>>> >>>>> >>>>> Which platforms would one see a difference between these two? (I'm not >>>>> seeing a difference on MacOS) >>>>> >>>> >>>> To see a difference you will have to turn on non-overlay scrollbars in >>>> the macOS settings. This feature only has an effect for cases where the OS >>>> provides non-overlay scrollbars. >>>> >>> >>> Tried it out and I now understand that my question RE triggering layout >>> shifts doesn't make sense, as the non-overlay scrollbars are always there. >>> Also, this is a significantly better user experience, so it >>> makes perfect sense to do this! :) >>> >>> >>>> Also: note that this is an I2P, not an I2S. I have not yet done a >>>> thorough compatibility analysis of existing sites, but plan to do it soon. >>>> >>>> >>>>> >>>>> >>>>>> >>>>>> >>>>>> Blink componentBlink>Scroll >>>>>> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3EScroll> >>>>>> >>>>>> TAG review >>>>>> >>>>>> TAG review statusNot applicable >>>>>> >>>>>> Risks >>>>>> >>>>>> >>>>>> Interoperability and Compatibility >>>>>> >>>>>> Developers currently relying on content overlapping the scrollbar >>>>>> gutter would instead see some additional line wrapping. Users, on the >>>>>> other >>>>>> hand, would be able to see more content that is currently invisible >>>>>> underneath a scrollbar. >>>>>> >>>>> >>>>> I'm assuming that content would avoid overlapping with the gutter >>>>> before scrolling ever starts, right? (rather than triggering layout >>>>> shifts >>>>> once the user scrolls) >>>>> >>>>> >>>>>> On platform configurations with overlay scrollbars in the OS, this >>>>>> change has no effect; it only applies to situations where a non-overlay >>>>>> scrollbar is configured by the browser. Use counter: >>>>>> https://chromestatus.com/metrics/feature/timeline/popularity/2995 >>>>>> Adoption is more than 2% of page loads. >>>>>> >>>>>> >>>>>> *Gecko*: Shipped/Shipping ( >>>>>> https://github.com/mozilla/standards-positions/issues/768) >>>>>> >>>>>> *WebKit*: Shipped/Shipping ( >>>>>> https://github.com/WebKit/standards-positions/issues/157) >>>>>> >>>>>> *Web developers*: No signals >>>>>> >>>>>> >>>>>> Debuggability >>>>>> >>>>>> Sites might not know why their line wrapping changed to exclude the >>>>>> scrollbar gutter. However, this is the existing behavior in Firefox and >>>>>> Safari, so they would get interop by default. >>>>>> >>>>>> 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 nameOverflowOverlayAliasesAuto >>>>>> >>>>>> Requires code in //chrome?No >>>>>> >>>>>> Estimated milestones >>>>>> Shipping on desktop 114 >>>>>> DevTrial on desktop 114 >>>>>> Shipping on Android 114 >>>>>> DevTrial on Android 114 >>>>>> Shipping on WebView 114 >>>>>> >>>>>> Link to entry on the Chrome Platform Status >>>>>> https://chromestatus.com/feature/5194091479957504 >>>>>> >>>>>> 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 [email protected]. >>>>>> To view this discussion on the web visit >>>>>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw-F4mOhUMuU3nw423C8CurZKX_wxQvXRPv-XT4Zhsm-XQ%40mail.gmail.com >>>>>> >>>>>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw-F4mOhUMuU3nw423C8CurZKX_wxQvXRPv-XT4Zhsm-XQ%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 [email protected]. >>>>> To view this discussion on the web visit >>>>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfWTkzPKzCF9gGdVHzXKVzDsv921OD-u_JTJv-muV3pkoQ%40mail.gmail.com >>>>> >>>>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfWTkzPKzCF9gGdVHzXKVzDsv921OD-u_JTJv-muV3pkoQ%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 [email protected]. >> > To view this discussion on the web visit >> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/02dd8a9c-a13a-4cf4-baf2-3eeab761b394n%40chromium.org >> >> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/02dd8a9c-a13a-4cf4-baf2-3eeab761b394n%40chromium.org?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 [email protected]. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ba2eb878-366e-4ffd-9234-98baedd7b878n%40chromium.org.
