Bug 275699

Summary:

Baseline at span is shifted inside the <strong> tag

Product:

WebKit

Reporter:

Sergei Gorbachev <angel-go>

Component:

Layout and Rendering

Assignee:

zalan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 17

Hardware:

iPhone / iPad

OS:

iOS 17

Attachments:

Description	Flags
example of baseline shifting in <strong> tag	none
font for test example	none
WebKit trunk rendering	none
Test reduction	none
[fast-cq]Patch	none

Sergei Gorbachev

Reported 2024-06-20 11:10:51 PDT

Created attachment 471713 [details] example of baseline shifting in <strong> tag Since iOS 17.4, I've noticed that the baseline of the text shifts down if the text is wrapped in a span tag while inside a <strong> tag A simple example where I noticed a bug: <p> <strong>Lorem ipsum, <span>dolor sit amet</span> consectetur adipisicing elit.</strong> Aliquam, odio! </p> <style> p { font: 17px/25px Charter, "Times New Roman"; } strong { font: bold 16px/25px Graphik LC Web; } </style> With different fonts the offset can be larger or smaller, however the problem is not reproduced in earlier versions of iOS before 17.4. On the webkit blog in release notes 17.4 https://webkit.org/blog/15063/webkit-features-in-safari-17-4/#css it says that the new inline layout engine is being finalized, I think these are related things

Attachments
example of baseline shifting in <strong> tag (44.62 KB, image/png) 2024-06-20 11:10 PDT, Sergei Gorbachev	no flags	Details
font for test example (68.00 KB, text/plain) 2024-06-20 11:43 PDT, Sergei Gorbachev	no flags	Details
WebKit trunk rendering (318.94 KB, image/png) 2024-06-20 11:54 PDT, zalan	no flags	Details
Test reduction (410 bytes, text/html) 2024-06-20 19:23 PDT, zalan	no flags	Details
[fast-cq]Patch (5.00 KB, patch) 2024-06-21 08:26 PDT, zalan	no flags	Details Formatted Diff Diff
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2024-06-20 11:13:19 PDT

<rdar://problem/130217599>

zalan

Comment 2 2024-06-20 11:35:03 PDT

Could you attach the web font you use to reproduce this issue with, please? I did a quick search and ended up at https://online-fonts.com/fonts/graphik-lc-web but I can't repro even when adding @font-face { font-family: "Graphik LC Web"; src: url("graphiklcweb_medium.ttf"); } to your test reduction.

Sergei Gorbachev

Comment 3 2024-06-20 11:43:25 PDT

Created attachment 471714 [details] font for test example

zalan

Comment 4 2024-06-20 11:44:47 PDT

(In reply to Sergei Gorbachev from comment #3) > Created attachment 471714 [details] > font for test example Thank you!

Sergei Gorbachev

Comment 5 2024-06-20 11:47:56 PDT

(In reply to zalan from comment #2) > Could you attach the web font you use to reproduce this issue with, please? > I did a quick search and ended up at > https://online-fonts.com/fonts/graphik-lc-web but I can't repro even when > adding > @font-face { > font-family: "Graphik LC Web"; > src: url("graphiklcweb_medium.ttf"); > } > to your test reduction. I couldn't add the ttf file to attachments due to invalid mime type, but I reproduced the example in the sandbox: https://codepen.io/levensta/pen/wvbmoKL

zalan

Comment 6 2024-06-20 11:54:24 PDT

Created attachment 471716 [details] WebKit trunk rendering This is what I am seeing on tip of tree WebKit. Maybe we've progressed here...

zalan

Comment 7 2024-06-20 11:55:14 PDT

let me check if I can repro it on iOS 17.4

zalan

Comment 8 2024-06-20 11:56:32 PDT

(I just noticed you reported it against iOS and I've been testing it on macOS...and while there should not be any difference between iOS and macOS layout in this case, let me double check it on iOS)

zalan

Comment 9 2024-06-20 12:01:55 PDT

ok, I can reproduce this on iOS.

zalan

Comment 10 2024-06-20 19:23:11 PDT

Created attachment 471717 [details] Test reduction This is repro on macOS too now. It seems to be specific to standards mode (note <!DOCTYPE html>)

zalan

Comment 11 2024-06-20 20:39:22 PDT

This is caused by our fast path for vertical alignment (see canUseSimplifiedAlignment in LineBoxVerticalAligner::computeLogicalHeightAndAlign). We should not let simplified alignment happen when font fallback is required.

zalan

Comment 12 2024-06-21 08:26:44 PDT

Created attachment 471722 [details] [fast-cq]Patch

EWS

Comment 13 2024-06-21 11:57:44 PDT

Committed 280255@main (ddce4481ff7c): <https://commits.webkit.org/280255@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 471722 [details].

Sergei Gorbachev

Comment 14 2024-06-21 14:52:32 PDT

(In reply to EWS from comment #13) > Committed 280255@main (ddce4481ff7c): > <https://commits.webkit.org/280255@main> > > All reviewed patches have been landed. Closing bug and clearing flags on > attachment 471722 [details]. Thanks for your promptness. Can you tell me where I can read the WebKit release cycle policy and updates to the WebKit engine itself in Safari? I found that Apple is preparing to release a minor version of 17.6 before releasing iOS 18 https://developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-17_6-release-notes, is it possible that a new version of WebKit with the patch to come out in that version or in general it could hit the fix versions of iOS between 17.6 and 18?

Note You need to log in before you can comment on or make changes to this bug.