1605265 - Border around focused CC-BY-SA link has broken design, justify bugs

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, defect)

Description

[Mozira]

Attachment: bugzilla.png

User Agent: Mozilla/5.0 (Windows NT 6.3; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Windows problem. 32-bit, other versions not tested.

1. Set window width 1000px with zoom 100%
   Load: https://wolne-forum-transowe.pl/art-regulamin-i-polityka-prywatnosci
   Scroll to blue link "CC-BY-SA 4.0"
   hover or focus the link.

2. Set window width 470px with zoom 1
   Load: https://wolne-forum-transowe.pl/
   The text is badly justified.

Actual results:

1. There is multiple borders instead of one border. Safari, Chrome and IE11 have not this problem.

2. There is additional free space after bold text. The text is not justified.

More on attached pictures

Expected results:

1. One border like in IE11, Chrome and Safari, no additional borders.

2. There should be no additional space if text is justified.

Comment 1

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Hi,

Thanks for the details. I was able to reproduce both issues on Windows 8.1, 64-bit on Firefox Nightly version 73.0a1 (2020-01-03) (64-bit), Release 71.0 (64-bit) and Beta 72.0b5 (64-bit)

I've chosen a component so that the issue is reviewed.

Best regards, Clara.

Comment 2

[Jonathan Kew [:jfkthame]]

With Nightly on macOS, I was able to reproduce the justification issue (2) but not the border issue (1), so maybe that is specific to Windows?

Comment 3

[Jonathan Kew [:jfkthame]]

I was going to file a separate bug for the justification issue mentioned, but it turns out that's already on file as bug 1366530. (It's not specific to bold text, any inline element such as a <span> can cause this kind of disruption.)

Comment 4

[Jonathan Kew [:jfkthame]]

(In reply to Jonathan Kew (:jfkthame) from comment #2)

With Nightly on macOS, I was able to reproduce the justification issue (2) but not the border issue (1), so maybe that is specific to Windows?

Correction: I have been able to reproduce the border issue on macOS as well. It's quite sensitive to the exact width of the text block; it isn't just dependent on the highlighted span/link being broken across lines, but on the exact width to which the text is wrapped.

Comment 5

[Jonathan Kew [:jfkthame]]

Attachment: reduced testcase

Here is a somewhat reduced page that reproduces the issue at least on macOS (it's dependent on glyph metrics, so might need adjustment if Arial isn't available). Compare the result of hovering over the two copies of the CC-BY-SA 4.0 link: the first one exhibits the issue, while the second (where the only difference is the width of the block) does not.

Comment 6

[Jonathan Kew [:jfkthame]]

Attachment: bug-1605265-testcase2.html

Comment 7

[Jonathan Kew [:jfkthame]]

The issue here arises from the inclusion of the overflow list which contains the link's ::after pseudo when we're computing the outline rect for the fragment of the link that is before the line-break.

Is there actually any reason we'd want to consider overflow lists when we're setting up a frame's outline rect? AFAICS skipping this does not break any current tests, and it resolves this issue.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Yeah, I can't see any reason why doing that would be sound. The overflow list doesn't always even have the guarantee of being reflowed yet, right?

Comment 9

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1605265 - Don't include overflow child list when computing outline rect. r=emilio

Comment 10

[Jonathan Kew [:jfkthame]]

I'm a bit suspicious that some of the other child list types might not make sense to include here either (e.g. pushed floats?); might be interesting to try and construct testcases that hit some of the others, if that's possible. But for now this looks like the minimal patch that fixes the actual issue reported here.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5ecc03922368
Don't include overflow child list when computing outline rect. r=emilio

Comment 12

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/5ecc03922368

Comment 13

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Is there a followup bug on fixing this for all lists? I suspect the right thing is:

include:
kPrincipalList,
kCaptionList,
kColGroupList, (probably doesn't matter?)
kBulletList,
kBackdropList, (not sure?)

exclude:
kPopupList,
kSelectPopupList,
kAbsoluteList,
kFixedList,
kOverflowList,
kOverflowContainersList,
kExcessOverflowContainersList,
kOverflowOutOfFlowList,
kFloatList,
kPushedFloatsList,

doesn't matter:
kNoReflowPrincipalList,