Bug 280759 – REGRESSION (Safari 18): DOM manipulations that require reflow do not always trigger reflow

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

Starting with Safari 18, it looks like there is a regression in the layout of certain elements due to specific DOM manipulations where necessary reflows or layout recalculations can be missed.

I am working on a simple codepen to show this, but in the meantime the issue can be seen using the public facing demos for the Oracle JET Table here:
https://www.oracle.com/webfolder/technetwork/jet/content/table-gridStyling/demo.html?theme=redwood&cssVars=default&debug=min&dir=ltr&fontSize=fontnone&color=default&notagcss=true&scale=lg&density=standard

The resulting DOM in this link will show a <div> and an <oj-table> custom element wrapping a <table> element that is allowed to grow to fit its contents. In all major browsers besides Safari 18 (Chrome, Firefox, Edge, Safari 17 and older), four columns worth of data are fully visible, with a vertical scrollbar allowing a user to see more content below. In Safari 18 though, the outer 2 wrapping elements have a stale width of 240px that looks like it is due to a min-width setting on the outer <oj-table> custom element. Nothing else about the DOM structure should be resulting in that width of 240px though, and the inner <table> element should be forcing the wrapping elements to grow to match its width of 600+ px. Sometimes, just opening the web inspector in Safari will actually trigger the wrapping element widths to jump to the correct, larger size. Otherwise, using the web inspector to find the <oj-table> element, and triggering any kind of simple update to it will cause it to jump to the correct width (I usually just toggle the :active state on/off with the web inspector after selecting it).

So far, if I create the same setup in a simple codepen with all of the same DOM and styling applied up front, the width is always correct and the issue does not reproduce. In the real product code though, the DOM is created dynamically and the timing of that DOM manipulation seems to be the root cause of this reflow / recalc being missed.

With the link above, sometimes you need to refresh the page to see the issue, though it is fairly consistent in being the wrong width.

I added a simple codepen that reproduces the issue - when running in Safari 18 (and also older versions of Safari), the overall size of the outer div is only 240px instead of much wider. When opening web inspector and making any trivial change (such as toggling the :active state on the outer div), the width is adjusted correctly.

https://codepen.io/turjmner8/pen/dyxMyLR

[Alexey Proskuryakov]

Thank you for the report! I can reproduce this issue with STP 200.

[Radar WebKit Bug Importer]

<rdar://problem/137235398>

[alan]

Created attachment 472797 [details]
Test reduction

[alan]

Created attachment 472799 [details]
Screenshot with fix applied (locally)

We seem to be missing a preferred with invalidation on the containing block when child goes from out-of-flow to inflow.

[alan]

Created attachment 472802 [details]
Patch

Thanks for the quick replies - am wondering if the fix for this issue also addresses this similar bug I also filed:

https://bugs.webkit.org/show_bug.cgi?id=280852

I couldn't quite tell if this was the same underlying issue as this other case where reflow was being missed seemed worth filing a separate bug for.

Thanks!

[alan]

Created attachment 472805 [details]
[fast-cq]Patch

[alan]

(In reply to jmturner8 from comment #8)
> Thanks for the quick replies - am wondering if the fix for this issue also
> addresses this similar bug I also filed:
> 
> https://bugs.webkit.org/show_bug.cgi?id=280852
Yeah, I saw that too. Thanks for filing it!

> 
> I couldn't quite tell if this was the same underlying issue as this other
> case where reflow was being missed seemed worth filing a separate bug for.
It's totally worth filing a separate bug! It's easier to mark it duplicate than dealing with multiple issues under one bug.

[EWS]

Committed 284679@main (80c060940757): <https://commits.webkit.org/284679@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 472805 [details].

[Sammy Gill]

*** Bug 247578 has been marked as a duplicate of this bug. ***

[alan]

*** Bug 286062 has been marked as a duplicate of this bug. ***