NEW 278043
3D Rotation on a sibling element causes text to render blurry (bitmap scaled) 
https://bugs.webkit.org/show_bug.cgi?id=278043
Summary 3D Rotation on a sibling element causes text to render blurry (bitmap scaled)
Jonathan Deutsch
Reported 2024-08-13 14:01:48 PDT
Created attachment 472144 [details] Blurry text See this code: <div style="position: absolute; transform: scale(4);"> <div style="position: absolute; width: 10px; height: 10px; background-color: black; transform: rotateY(15deg);"></div> <div style="position: absolute; font-size: 54px;">Not Crisp!</div> </div> There is a scaled parent and two siblings. One sibling has a 3D rotation. The other has text. The 3D rotation causes the text to be rendered in a scaled (blurry) mode. Screenshot attached. If the 3D rotation is removed, the text is rendered as sharp. I would not expect a sibling element to affect the rendering here. Chrome and Firefox do not have this issue. I tested this on Safari Technology Preview Release 199 using macOS 14.6 (23G80). I haven't tested on other versions.
Attachments
Blurry text (148.43 KB, image/png)
2024-08-13 14:01 PDT, Jonathan Deutsch 		no flags
Details
rendering in safari, firefox, chrome (234.58 KB, image/png)
2024-08-14 01:19 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2024-08-14 01:19:02 PDT
Created attachment 472149 [details] rendering in safari, firefox, chrome This is the rendering on a 1x screen This is less worse on a retina screen, but still very different than Firefox and Chrome.
Radar WebKit Bug Importer
Comment 2 2024-08-14 01:20:49 PDT
<rdar://problem/133824432>
Karl Dubost
Comment 3 2024-08-14 01:22:09 PDT
tested on Safari Technology Preview 200 20620.1.1 Firefox Nightly 131.0a1 13124.8.12 Google Chrome Canary 129.0.6656.0 6656.0
Note You need to log in before you can comment on or make changes to this bug.