1544146 - horizontal overflow at stuffandnonsense.co.uk (due to percent absolute position for wide "tooltip" inside linewrapped inline-level containing block)

Status: NEW

(Core :: Layout: Positioned, defect, P3)

Description

[Asif Youssuff]

1. Visit https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode
2. Try to scroll horizontally

Not reproducible in Chrome.

I see this in Fennec, Fenix and Reference Browser, but is not reproducible in RDM. It is the worst in Fennec (more overflow).

Comment 1

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

I presume "RDM" is Responsive Design Mode (in Firefox)?

Comment 2

[Asif Youssuff]

I presume "RDM" is Responsive Design Mode (in Firefox)?

Yes, that is right.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

I can see the horizontal overflow on Chrome as well, if I set the system font size to a bigger one, the overflow gets wider on Chrome.

Comment 4

[Asif Youssuff]

Since it seems significant - I am on a Pixel 2 and my display size is set to "default" and my font size is set to "small" - both in Android settings.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Setting P3 for now since it also happens on Chrome.

Comment 6

[Daniel Holbert [:dholbert]]

The overflow is coming from a "tooltip" (which in this case is really just web content) on an element at the very very bottom of the page.

The tooltip has "visibility:hidden;opacity:0" by default (though it still occupies layout space). You can make it show up if you tap "What's a download?" at the very bottom of the page. When you do this, you can see that it extends outside the viewport on Firefox, but does not in Chrome.

Comment 7

[Daniel Holbert [:dholbert]]

(The tooltip here is an abspos ::after pseudo-element, whose abspos containing block is the <a> parent itself (because that <a> element has position:relative).

Firefox and Chrome seem to disagree about the position of this tooltip when its containing block (that <a> element) is wrapped to 2 lines. I can reproduce this disagreement in RDM.

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a testcase for what I think is the underlying rendering issue here.

The upper and lower halves of this test are the same, except for the fact that the upper half has a linebreak in the (inline-level) abspos containing block.

That seems to make Chrome resolve all percentages to 0 and stack all of the colorful boxes at the upper left corner as a result. In contrast, Firefox still resolves all of the percentages just fine, relative to the first continuation of the line-wrapped containing block (the chunk on the first line).

This matters for the page in question because the site's "tooltip" here has left:50%, which Firefox resolves to something nonzero but Chrome resolves to 0 (if the What's a download? link is linewrapped). And Chrome positions that tooltip to the left of where Firefox positions it as a result.

I suspect Chrome's behavior here is wrong.

Comment 9

[Daniel Holbert [:dholbert]]

...though actually, Edge 18 (pre-Chromium-switchover) agrees with Chrome on my testcase, as does Safari. So we seem to be the odd one out here.

Comment 10

[Daniel Holbert [:dholbert]]

And it looks like we have known bugs around abspos things with an inline-level containing block -- e.g. bug 489100, bug 255139 and friends. So maybe we're in the wrong after all? Not sure.

Comment 11

[Daniel Holbert [:dholbert]]

Aha, so really this seems like a special case of bug 1533151.

hiro: given your observation in comment 3 (that Chrome can be made to be affected), should we remove the association with bug 1123938? I don't think this bug is a scenario where our viewport handling is different -- we just have content at a different (overflowing) position as compared to Chrome.

Comment 12

[Hiroyuki Ikezoe (:hiro)]

Yes, absolutely! Thanks for investigating this in detail!