RESOLVED CONFIGURATION CHANGED190782
In pre-wrap, span is displaced to the left when preceded by tab and shy hyphen 
https://bugs.webkit.org/show_bug.cgi?id=190782
Summary In pre-wrap, span is displaced to the left when preceded by tab and shy hyphen
Johan Winge
Reported 2018-10-21 15:48:32 PDT
Created attachment 352877 [details] Simple html file demonstrating the bug. In a line in a <div> with style="white-space: pre-wrap;", if there is a tab character, followed by some text which includes a shy hyphen (&shy;), followed by a <span>, the span will be displaced to the left. (Perhaps the length of the negative displacement is equal to the width of a visible hyphen, but that is just my guess.) The attached document shows the bug clearly: when " &shy;a<span>b</span>" is rendered, the "b" character overlaps the "a".
Attachments
Simple html file demonstrating the bug. (512 bytes, text/html)
2018-10-21 15:48 PDT, Johan Winge 		no flags
Details
The source text and the incorrect wrapped HTML. (99.62 KB, image/png)
2019-04-07 19:50 PDT, Samuel Williams 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Johan Winge
Comment 1 2018-10-22 14:22:39 PDT
Actually, not just <span>, but any inline element will do the trick. A true minimal case looks like this: <body style="white-space: pre-wrap;"> a&shy;<a>b</a></body>
Johan Winge
Comment 2 2018-10-23 10:13:30 PDT
(In reply to Johan Winge from comment #1) > Actually, not just <span>, but any inline element will do the trick. A true > minimal case looks like this: <body style="white-space: pre-wrap;"> > a&shy;<a>b</a></body> Correction: make that <body style="white-space: pre-wrap;"> &shy;a<a>b</a></body> with "a" after "&shy;". Interestingly, both variants seem to trigger the bug in Chrome, but only the later in WebKit.
Radar WebKit Bug Importer
Comment 3 2018-10-23 11:20:16 PDT
<rdar://problem/45493612>
Johan Winge
Comment 4 2018-10-27 14:24:02 PDT
The corresponding bug in Chrome has been reported here: https://crbug.com/899505
Samuel Williams
Comment 5 2019-04-07 19:50:33 PDT
Created attachment 366917 [details] The source text and the incorrect wrapped HTML.
Samuel Williams
Comment 6 2019-04-07 19:59:59 PDT
I think I'm having the same problem. It seems like tab width is not being computed correctly and it's forcing the text to wrap. Here is the HTML: ``` <style type="text/css"> pre code.syntax-theme-base { white-space: pre-wrap; } pre code.syntax-theme-base > span { display: flex; } pre code.syntax-theme-base .text { padding-left: 2ch; text-indent: -2ch; background-color: green; border: 1px solid red; } </style> <pre style="tab-size: 4;"><code class="syntax-theme-base"> <span class="assembly"><span class="text"><span class="label">LM49:</span></span></span> <span class="assembly"><span class="indent"> </span><span class="text"><span class="function">movl</span> <span class="constant">-60</span>(<span class="register">%ebp</span>), <span class="register">%edx</span></span></span> <span class="assembly"><span class="indent"> </span><span class="text"><span class="function">movl</span> <span class="constant">L_OBJC_SELECTOR_REFERENCES_2</span>, <span class="register">%eax</span></span></span> </code></pre> ``` Maybe this is a different bug?
Karl Dubost
Comment 7 2022-10-14 06:30:33 PDT
Using the test case. I see no differences in between Safari, Firefox and Chrome. This might have been fixed by something else.
alan
Comment 8 2022-10-14 06:59:45 PDT
IFC progression.
Note You need to log in before you can comment on or make changes to this bug.