RESOLVED FIXED 183079
[Simple line layout] Text with letter spacing is not positioned properly.
https://bugs.webkit.org/show_bug.cgi?id=183079
Summary [Simple line layout] Text with letter spacing is not positioned properly.
Tobi Reif
Reported 2018-02-23 04:06:55 PST
Created attachment 334516 [details] the code (Please replace the title with something more specific.) Please open the current version of https://tobireif.com/demos/grid/ in current Safari, set the window width to eg 630, and click on "Layout 2" - the text "The Sane Choice!" is off-center and cut off. (Same issue in the current Tech Preview.) Please also resize the window to various widths and observe that line of text. Attaching a zip so that you have the code that shows the Webkit issue even if I change the relevant code in my page.
Attachments
the code (42.55 KB, application/zip)
2018-02-23 04:06 PST, Tobi Reif
no flags
screenshot of the page in the zip, in Safari (399.12 KB, image/png)
2018-02-23 04:44 PST, Tobi Reif
no flags
screenshot of the page in the zip, in Chrome (251.78 KB, image/png)
2018-02-23 04:45 PST, Tobi Reif
no flags
r228947 centered text (411.89 KB, image/png)
2018-02-23 07:31 PST, alan
no flags
screenshot_of webkit_228949 (435.66 KB, image/png)
2018-02-23 09:16 PST, Tobi Reif
no flags
Test reduction (218 bytes, text/html)
2018-03-22 11:14 PDT, alan
no flags
Patch (4.72 KB, patch)
2018-03-22 14:03 PDT, alan
no flags
Tobi Reif
Comment 1 2018-02-23 04:28:41 PST
P.S. When I comment out this line it works: .layout2 .page aside { grid-row: 3; grid-column: 1; align-self: center; justify-self: center; /* text-align: center; */ } But I think it should work wit the code as it was before (as in the zip). (The version in the zip works in Chrome etc but not in Safari. I think that should get fixed in any case.)
Tobi Reif
Comment 2 2018-02-23 04:30:05 PST
"wit" -> "with"
Tobi Reif
Comment 3 2018-02-23 04:44:28 PST
Created attachment 334517 [details] screenshot of the page in the zip, in Safari
Tobi Reif
Comment 4 2018-02-23 04:45:02 PST
Created attachment 334518 [details] screenshot of the page in the zip, in Chrome
Tobi Reif
Comment 5 2018-02-23 04:45:36 PST
Perhaps the issue is related to justify-self:center?
alan
Comment 6 2018-02-23 07:30:43 PST
It seems to be working fine with r228947. See attached screenshot. (unless I am not resizing the viewport right).
alan
Comment 7 2018-02-23 07:31:09 PST
Created attachment 334531 [details] r228947 centered text
Tobi Reif
Comment 8 2018-02-23 09:16:10 PST
Thanks for trying to reproduce the issue! I tried it again and was able to reproduce the issue in the latest WebKit (as in current Safari and Tech Preview). I downloaded the latest WebKit from https://webkit.org/build-archives/ : https://s3-us-west-2.amazonaws.com/minified-archives.webkit.org/mac-highsierra-x86_64-release/228949.zip Then I used Chrome (with dev tools open so that Chrome show the dimensions) to get a window of 630 width. Then I opened the page from the zip in the browser that's launched by run-webkit-archive, set the window width to the same width as the 630 wide Chrome window, and on the page clicked on the button "Layout 2". The text "The Sane Choice!" is off-center and cut off, see "screenshot_of webkit_228949.png".
Tobi Reif
Comment 9 2018-02-23 09:16:53 PST
Created attachment 334534 [details] screenshot_of webkit_228949
Tobi Reif
Comment 10 2018-02-26 02:00:07 PST
I hope you can reproduce the issue using my latest steps.
Tobi Reif
Comment 11 2018-03-01 01:34:06 PST
I just tried it again, on a different machine, and was able to reproduce the issue again (using the attached zip named "the code"). I followed the latest steps (using Safari stable) I describe in comment 8 - the text "The Sane Choice" is off-center and cut off (that is the issue). Here's a screenshot: https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10895686/snapshots/z38c277928dc80b55a1d I hope you can reproduce and fix the issue.
alan
Comment 12 2018-03-01 14:21:29 PST
Simple and normal line layout disagree :(
alan
Comment 13 2018-03-22 11:14:58 PDT
Created attachment 336291 [details] Test reduction Test reduction. Dynamic letter spacing fails with simple line layout.
Radar WebKit Bug Importer
Comment 14 2018-03-22 12:44:20 PDT
alan
Comment 15 2018-03-22 13:03:11 PDT
RenderText::m_canUseSimplifiedTextMeasuring needs updating after style change since we might be able to use the fast path after certain (letter spacing etc) style change.
alan
Comment 16 2018-03-22 14:03:16 PDT
WebKit Commit Bot
Comment 17 2018-03-22 14:59:46 PDT
Comment on attachment 336310 [details] Patch Clearing flags on attachment: 336310 Committed r229867: <https://trac.webkit.org/changeset/229867>
WebKit Commit Bot
Comment 18 2018-03-22 14:59:47 PDT
All reviewed patches have been landed. Closing bug.
Tobi Reif
Comment 19 2018-03-23 02:41:50 PDT
Thanks all!
Tobi Reif
Comment 20 2018-03-27 00:31:50 PDT
I just checked in the latest WebKit from https://webkit.org/build-archives/ - it works! Thanks!
alan
Comment 21 2018-03-27 07:15:31 PDT
(In reply to Tobi Reif from comment #20) > I just checked in the latest WebKit from https://webkit.org/build-archives/ > - it works! Thanks! Thank you for verifying it!
Note You need to log in before you can comment on or make changes to this bug.