| Summary: | Inline-level elements with self-painting layer renders overlapping ellipsis. | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Ethan Wong <bunnnywong> | ||||||||||
| Component: | Layout and Rendering | Assignee: | zalan <zalan> | ||||||||||
| Status: | RESOLVED FIXED | ||||||||||||
| Severity: | Minor | CC: | bfulgham, bunnnywong, changseok, esprehn+autocc, ews-watchlist, fred.wang, glenn, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, zalan | ||||||||||
| Priority: | P3 | Keywords: | InRadar | ||||||||||
| Version: | Safari 16 | ||||||||||||
| Hardware: | All | ||||||||||||
| OS: | All | ||||||||||||
| Attachments: |
|
||||||||||||
Created attachment 466624 [details]
Browser comparations of the attached case
that's a good catch. so this can be triggered on any self-painting inline level element e.g.
<style>
div {
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}
img {
height: 50px;
width: 50px;
background: green;
}
.overflow {
background: red;
transform: translateZ(0);
}
</style>
PASS in no red shows.
<div><img><img class=overflow></div>
Right, the initial issue we discovered in our app was an inline image with `position: relative` being cut in half. Ethan, are you planning on working on this? (asking because you landed some great fixes in the past and wanted to make sure we don't start working on the same issue). (In reply to zalan from comment #4) > Ethan, are you planning on working on this? (asking because you landed some > great fixes in the past and wanted to make sure we don't start working on > the same issue). I spent some time debugging on this issue but have no idea how to fix it, so I just reported it here. (In reply to Ethan Wong from comment #5) > (In reply to zalan from comment #4) > > Ethan, are you planning on working on this? (asking because you landed some > > great fixes in the past and wanted to make sure we don't start working on > > the same issue). > > I spent some time debugging on this issue but have no idea how to fix it, so > I just reported it here. Thank you. Looking into it now. Created attachment 466628 [details]
Patch
^^^ fixes the attached test case (I still need to come up with some more cases and include them in this patch). Created attachment 466630 [details]
Patch
Committed 264973@main (c38822c4ed1c): <https://commits.webkit.org/264973@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 466630 [details]. |
Created attachment 466623 [details] A case to reproduce this issue Inline-level elements with self-painting layer (`hasSelfPaintingLayer == true`) may be rendered renders overlapping ellipsis generated by `text-overflow: ellipsis`. See the attached case and screenshot. Specifically `position: relative` causes the `<span>` element to be self-painted from the layer. This issue is caused due to self-painting layer chilldrens being painted in a different flow without the knowledge about its the line layout context. The actual behavior that hides the overflow element happens at `InlineContentPainter::paintDisplayBox(const InlineDisplay::Box&)` when `box.isFullyTruncated() == true`.