Bug 246100

Summary: Text is slightly misaligned at specific font sizes or container widths
Product: WebKit Reporter: Roel Nieskens <webkitbugzilla>
Component: TextAssignee: alan baradlay <zalan>
Status: NEW    
Severity: Normal CC: changseok, esprehn+autocc, ews-watchlist, glenn, karlcow, kondapallykalyan, mmaxfield, pdr, webkit-bug-importer, webkitbugzilla, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 15   
Hardware: Mac (Intel)   
OS: macOS 12   
See Also: https://bugs.webkit.org/show_bug.cgi?id=261212
Attachments:
Description Flags
Test reduction
none
Test without flex (simple out-of-flow positioning)
none
Fix with screenrecording
none
Patch
none
Patch ews-feeder: commit-queue-

Roel Nieskens
Reported 2022-10-05 12:06:39 PDT
A perfectly square character will be misaligned in certain cases. See in action: https://codepen.io/RoelN/pen/xxjpwjP There are two ways to trigger this bug: 1. Container is 800px. The font size of the icon is 64px, and is spinning via a CSS animation. The icon is centered (good). Change the font size to 64px, and the icon is suddenly not centered. It "wobbles". This is not good. 2. With the font size at 64px, there is no wobble. But change the container width to 800.5px, and the character wobbles. Anything below 0.5 will not cause a wobble, but anything above 0.5 will. This does not happen in Firefox of Chrome. Curiously, it does happen in Windows. I'm on a MacBook Pro (16-inch, 2019), 2,6 GHz 6-Core Intel Core i7. Safari Version 15.6.1 (17613.3.9.1.16), no extensions.
Attachments
Test reduction (304 bytes, text/html)
2022-10-06 09:44 PDT, alan baradlay 		no flags
Details
Test without flex (simple out-of-flow positioning) (516 bytes, text/html)
2022-10-06 11:05 PDT, alan baradlay 		no flags
Details
Fix with screenrecording (9.90 MB, video/quicktime)
2022-10-06 12:02 PDT, alan baradlay 		no flags
Details
Patch (3.44 KB, patch)
2022-10-06 20:22 PDT, alan baradlay 		no flags
DetailsFormatted DiffDiff
Patch (6.67 KB, patch)
2023-04-17 18:51 PDT, alan baradlay 		ews-feeder: commit-queue-
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Roel Nieskens
Comment 1 2022-10-05 12:51:33 PDT
> Curiously, it does happen in Windows. Sorry, this should read: Curiously, it does happen in the Opera browser.
Radar WebKit Bug Importer
Comment 2 2022-10-05 15:29:21 PDT
<rdar://problem/100826711>
Roel Nieskens
Comment 3 2022-10-06 01:48:14 PDT
I really should've had more coffee before writing this, apologies for the noise. > Change the font size to 64px, and the icon is suddenly not centered. Should read: Change the font size to 68px, and the icon is suddenly not centered.
alan baradlay
Comment 4 2022-10-06 09:44:51 PDT
Created attachment 462839 [details] Test reduction
alan baradlay
Comment 5 2022-10-06 11:05:00 PDT
Created attachment 462840 [details] Test without flex (simple out-of-flow positioning)
alan baradlay
Comment 6 2022-10-06 12:01:03 PDT
This seems to be caused by the lack of inline content (horizontal) pixelsnapping (the visual glitch shows up when the block painting produces a pixelsnapped (position/size) block box while the inline painting stays on a non-snapped position. On a 2x display, it's most visible at 0.25 and 0.75 where the block box get pixelsnapped to 0.5, 1, while the inline content is still painted at 0.25 and 0.75 (touching border). the following snippet fixes the test case (it surely needs some more work though). diff --git a/Source/WebCore/rendering/RenderBlockFlow.cpp b/Source/WebCore/rendering/RenderBlockFlow.cpp index 6f46a2aaf2ae..0141ac14dfff 100644 --- a/Source/WebCore/rendering/RenderBlockFlow.cpp +++ b/Source/WebCore/rendering/RenderBlockFlow.cpp @@ -3486,13 +3486,14 @@ void RenderBlockFlow::paintInlineChildren(PaintInfo& paintInfo, const LayoutPoin { ASSERT(childrenInline()); + auto adjustedPaintOffset = LayoutPoint { roundPointToDevicePixels(paintOffset, document().deviceScaleFactor()) }; if (modernLineLayout()) { - modernLineLayout()->paint(paintInfo, paintOffset); + modernLineLayout()->paint(paintInfo, adjustedPaintOffset); return; } if (legacyLineLayout()) - legacyLineLayout()->lineBoxes().paint(this, paintInfo, paintOffset); + legacyLineLayout()->lineBoxes().paint(this, paintInfo, adjustedPaintOffset); } bool RenderBlockFlow::relayoutForPagination()
alan baradlay
Comment 7 2022-10-06 12:02:25 PDT
Created attachment 462844 [details] Fix with screenrecording
alan baradlay
Comment 8 2022-10-06 20:22:50 PDT
Created attachment 462857 [details] Patch
alan baradlay
Comment 9 2022-10-06 20:23:39 PDT
let's see what EWS has to say about it.
alan baradlay
Comment 10 2023-04-17 18:51:47 PDT
Created attachment 465952 [details] Patch
alan baradlay
Comment 11 2023-04-18 07:06:33 PDT
There are quite a few (~25) subpixel diff type of failures.
alan baradlay
Comment 12 2023-04-22 21:56:38 PDT
This is blocked by integral rounding in IFC (planning on removing it).
Note You need to log in before you can comment on or make changes to this bug.