Chrome Update Breaks Scroll Behavior

[escherlies]

Bug

After a recent Chrome update, we have noticed that the scroll behavior is broken.

Ellie example: https://ellie-app.com/smLZnK4J7cta1

Expected Behavior The scrollable container should scroll and not overflow.

Investigation At first glance, the Chrome behavior of min-height: min-content might have changed. Adding min-height: unset to the element with the scrollbars attribute fixes the problem on Chrome (see Ellie).

Versions

• OS: macOS and Windows
• Browser: Chrome/Chromium-based browsers
• Browser Version: Version 129.0.6668.71 (Official Build) (arm64)
• Elm Version: [Please specify the version number]
• Elm UI Version: [Please specify the version number]

[Viir]

Thank you for sharing this fix!

This issue and corresponding mitigation is also discussed on the chromium issue tracker at https://issues.chromium.org/issues/368634145

[Viir]

Today, I learned more about mitigating the scrollbar issue that has appeared with Chrome 129. At first, I tried to add the min-height: min-content in several affected applications. This restored scrollbars in many cases, but I noticed that in some cases, scrollbars were still missing in elements with the .scrollbarY attribute.

Therefore, I tested removing the min-height: min-content and adding contain: size instead. This setter worked better in my apps.

But even after this improvement, I noticed a case where the behavior differed from earlier combinations. In one case, I had an Element.scrollbarY in a function reused from two different views. One of these parent views also applies Element.scrollbarY. As far as I remember, that inner element took available height in earlier versions, but not anymore with Chromium 129 combined with said change in CSS. So, in that case, I also had to take care to remove the nested Element.scrollbarY.