1897683 - The characters are cut off

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Nguyen Trong Tuan]

Attachment: pro.png

Steps to reproduce:

Visit https://www.apple.com/tw/ipad-pro/

Actual results:

The Chinese characters are cutted off

Expected results:

They should be rendered correctly

Comment 1

[Alice0775 White]

background-clip: text;

Comment 2

[Jonathan Kew [:jfkthame]]

The characters render without the tops being cut off for me on macOS. Possibly a platform-specific bug?

Comment 3

[Jonathan Kew [:jfkthame]]

To confirm, on my Win10 machine, I do see the tops of the glyphs being cut off.

Comment 4

[Alice0775 White]

Attachment: reduced html

The problem is reproduced on Nightly128.0a1 Windows11, but not on Kubuntu22.04.

With the attached reduced html,
The problem seems to depend on the default font with lang="zh-TW".
The problem is reproduced with "Microsoft JhengHei".
The problem is not reproduced with font "Noto Sans CJK TC".

Comment 5

[Timothy Nikkel (:tnikkel)]

Just a guess, maybe GenerateAndPushTextMask here

https://searchfox.org/mozilla-central/rev/00b18126ec6a14a710086eb24e6a281460a678d5/layout/painting/nsDisplayList.cpp#292

it uses nsRect(nsPoint(0, 0), aFrame->GetSize()) as the rect, perhaps the ink overflow rect would contain the tops of characters there?

Comment 6

[Timothy Nikkel (:tnikkel)]

That seems more likely given the rects and overflows of the frames involved.

              Block(p)(0)@10a8aab38 parent=10a8aaa20 (x=0, y=420, w=15360, h=4200) ink-overflow=(x=-30, y=-660, w=15420, h=5400) scr-overflow=(x=0, y=-660, w=15360, h=5400) [content=10d304550] [cs=10a89ff08] <
                line@10a8aaca0 count=1 state=inline,clean,prevmarginclean,not-impacted,not-wrapped,no-break,clear-before:none,clear-after:none(x=0, y=0, w=15360, h=4200) ink-overflow=(x=-30, y=-660, w=15420, h=5400) scr-overflow=(x=0, y=-660, w=15360, h=5400) <
                  Text(0)"\u8584\u51fa\u78c5\u7934"@10a8aac00 parent=10a8aab38 (x=0, y=-660, w=15360, h=5400) ink-overflow=(x=-30, y=0, w=15420, h=5400) scr-overflow=(x=0, y=0, w=15360, h=5400) [content=10d305200] [cs=10a89fe08:-moz-text] [run=10a6fc790][0,4,T] 
                >
              >

Comment 7

[Timothy Nikkel (:tnikkel)]

But maybe we are doing the correct thing. This is background-clip: text. So this is the background of the <p> element and we are clipping to the text that the <p> contains. Without background-clip: text we wouldn't draw the background outside of the box for the <p>, so should background-clip: text suddenly extend where the background of the <p> is draw to outside its box (if the text extends outside of it)?

Comment 8

[Timothy Nikkel (:tnikkel)]

Oh wait, but there is

  background-position:bottom;
  background-size:100% 90%;

That means we don't draw the background in the top 10%, so this maybe is the site doing this to itself.

Comment 9

[Jonathan Kew [:jfkthame]]

Yeah - note that it also has background-repeat:none. Without that, the tops of the glyphs would re-appear (although it'd look ugly, as the background abruptly cuts back to the beginning -- it wasn't designed to be smoothly repeated).

So the issue is that the site is making an assumption about the height of the Chinese glyphs, relative to the bounds of the containing block, and that isn't completely reliable/consistent across platforms, because of differences in handling of font metrics.

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:tnikkel, could you have a look please?

For more information, please visit BugBot documentation.

Comment 11

[Timothy Nikkel (:tnikkel)]

Does web compat handle things like this? Feel free to bounce back if not.