Created attachment 313914 [details]
Reduced Test Case for details-element rem font-size rendering bug
I just discovered a very weird issue with the `details` and `summary` elements in Safari / WebKit.
When adding a details and summary element to a web page, follow up content will be mis-rendered due to miscalculation in the font-size. The misrendering only affects elements that are calculated based on rem-units.
Note that the issue disappears when triggering a repaint (opening DevTools or window resize, not SplitView, not orientationchange in responsive mode but on real device) after page load.
Please see the reduced test case attached for more information.
To clarify: The bug seems to be with rem values, not only with font-size itself.
As a second test you can also copy the source from https://mathiasbynens.be/demo/html5-details-jquery and place the h1 after the details element in the source, then call the file to see the rendering issues. It doesn’t work when doing this in Developer Tools though.
Created attachment 315786 [details]
Another reduced test case showing the problem
It can also be easily reproducible in the W3C specs. For example:
Created attachment 315787 [details]
Screenshot of the issue in the W3C specs
I also ran into the same issue yesterday: https://twitter.com/csswizardry/status/897110955448029184
Reduced test-case: http://csswizardry.net/demos/safari-details-text/
I can't reproduce this on iOS 12.4.2 nor Safari 13.0.2 on macOS 10.14.6. Seems like it was fixed in an earlier version.
Fixed a while back.
*** This bug has been marked as a duplicate of bug 177585 ***
Whoa! This was a blast from the past. Thanks to all involved in landing this. It looks like it happened quite a while ago, but I was just able to go back to my client’s project and rip out the hack. Thank you!