[Simple line layout] Text with letter spacing is not positioned properly.

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Tobi Reif]

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.

[Tobi Reif]

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]

"wit" -> "with"

[Tobi Reif]

Created attachment 334517 [details]
screenshot of the page in the zip, in Safari

[Tobi Reif]

Created attachment 334518 [details]
screenshot of the page in the zip, in Chrome

[Tobi Reif]

Perhaps the issue is related to justify-self:center?

[zalan]

It seems to be working fine with r228947. See attached screenshot. (unless I am not resizing the viewport right).

[zalan]

Created attachment 334531 [details]
r228947 centered text

[Tobi Reif]

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]

Created attachment 334534 [details]
screenshot_of webkit_228949

[Tobi Reif]

I hope you can reproduce the issue using my latest steps.

[Tobi Reif]

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.

[zalan]

Simple and normal line layout disagree :(

[zalan]

Created attachment 336291 [details]
Test reduction

Test reduction. Dynamic letter spacing fails with simple line layout.

[Radar WebKit Bug Importer]

<rdar://problem/38762569>

[zalan]

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.

[zalan]

Created attachment 336310 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 336310 [details]
Patch

Clearing flags on attachment: 336310

Committed r229867: <https://trac.webkit.org/changeset/229867>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Tobi Reif]

Thanks all!

[Tobi Reif]

I just checked in the latest WebKit from https://webkit.org/build-archives/ - it works! Thanks!

[zalan]

(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!