Bug 286021

Summary: Ruby markup in flexbox or grid breaks layout
Product: WebKit Reporter: Kevin Muncie <nivek2002>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, jensimmons, karlcow, nivek2002, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 18   
Hardware: Mac (Apple Silicon)   
OS: macOS 15   
URL: https://codepen.io/kmuncie/pen/jENKyKa
Attachments:
Description Flags
Reduced test case html
none
Screenshot showing issue in two browsers
none
Updated screenshot showing three browsers and added Chinese none

Kevin Muncie
Reported 2025-01-15 13:08:59 PST
Created attachment 473912 [details] Reduced test case html Ever since Safari 18.2 was released with improved support for ruby layout we have been having layout issues appear when Flexbox or CSS Grid are used. We have been seeing consistent changes and sometimes improvements to these issues in Safari Technology Preview but it has been unclear what is driving these changes and what known bugs are being worked on. This is our contribution of a reduced test case showing the issue in 18.2 but not in Technology Preview. However in our production code we are still seeing layout issues at times in both Japanese and Chinese when using ruby markup. Can you provide some insights into the ongoing work being done in this area? Thanks https://codepen.io/kmuncie/pen/jENKyKa
Attachments
Reduced test case html (1.85 KB, text/html)
2025-01-15 13:08 PST, Kevin Muncie 		no flags
Details
Screenshot showing issue in two browsers (115.83 KB, image/png)
2025-01-15 13:09 PST, Kevin Muncie 		no flags
Details
Updated screenshot showing three browsers and added Chinese (378.96 KB, image/png)
2025-01-15 13:43 PST, Kevin Muncie 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Kevin Muncie
Comment 1 2025-01-15 13:09:23 PST
Created attachment 473913 [details] Screenshot showing issue in two browsers
Kevin Muncie
Comment 2 2025-01-15 13:43:43 PST
Created attachment 473914 [details] Updated screenshot showing three browsers and added Chinese Updated the Codepen to include Chinese examples which are still breaking in Technology Preview. Also attaching a new screenshot showing this example in Safari 18.2, Safari Technology Preview, and Chrome where it renders correctly.
Radar WebKit Bug Importer
Comment 3 2025-01-15 14:12:00 PST
<rdar://problem/142997774>
Jen Simmons
Comment 4 2025-01-16 08:08:12 PST
Taking a look at this, there does not seem to be an error in WebKit. There are changes in ruby in Safari 18.2 that better align WebKit with the web standard for ruby: drafts.csswg.org/css-ruby-1/ The web standards are how things are "supposed to" work. (Not the most-popular browser nor the first browser to ship, etc). The screenshots shows progression — things getting better, being updated to be how they should be.
Note You need to log in before you can comment on or make changes to this bug.