Bug 278043

Summary: 3D Rotation on a sibling element causes text to render blurry (bitmap scaled)
Product: WebKit Reporter: Jonathan Deutsch <jonathan>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, bfulgham, jonathan, karlcow, mattwoodrow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 17   
Hardware: Unspecified   
OS: Unspecified   
URL: https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=14413
See Also: https://bugs.webkit.org/show_bug.cgi?id=27684
Attachments:
Description Flags
Blurry text
none
rendering in safari, firefox, chrome none

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.