Open Bug 1708871 Opened 3 years ago Updated 2 years ago

Element with large negative `text-indent` breaks viewports on sites with `direction: rtl`

Categories

(Core :: Layout, defect)

defect

Tracking

()

Webcompat Priority P3

People

(Reporter: denschub, Unassigned)

References

Details

Attachments

(1 file)

Attached file index.html

In the attached testcase, the body has direction: rtl;.

One element with some text in it has position: absolute; text-indent: -9999px, which apparently is a commonly used hack to move text out of the view, instead of hiding it. Unfortunately, this somehow causes the second blue div, which has position: fixed, to be wider than the viewport should be, causing the site to be scrollable on mobile viewports (Fenix, GVE, RDM with touch simulation enabled, ...).

Elements without position: fixed, like the first blue div, appear to be not affected.

Forgot to add an important thing: Chrome has no issues with this, and renders both divs the same width!

I can reproduce the issue (tons of unexpected horizontal scrollable area) in Firefox on Desktop in responsive design mode, if I turn on touch simulation (the little finger-pointy icon, just to the right of the UA-string textfield in responsive design mode).

(Without touch simulation, things are fine; we do show a horizontal scrollbar, but there's hardly any room to scroll, which seems to be what Chrome does as well.)

I'm guessing this has to do with the Visual Viewport API (or something else related to scrollports on mobile devices). hiro or botond, I think that's in your area of expertise -- maybe you could take a look at this at some point?

Component: Layout → Panning and Zooming
Flags: needinfo?(hikezoe.birchill)

Mozregression says I can reproduce this as far back as Nightly 2019-03-19 (on Desktop in RDM mode with that touch-simulation button pressed, and with devtools.responsive.metaViewport.enabled set to true, which is the default now but wasn't always).

"Regression range" (in quotes because I think the bug really goes back further, as noted below):
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=fe798624cda039ae74289929e35487560d354db2&tochange=d15d511d7fed036d69d37cecbacdea779a983a34

bug 1501665 looks most related there, but it seems fairly RDM-specific, so I suspect the bug really goes back further and bug 1501665 just made it possible to reproduce on desktop with RDM.

I believe this is a long standing issue,

From bug 1659894 comment 1;
(In reply to Jonathan Kew (:jfkthame) from comment #1)

It seems inconsistent that a negative text-indent like this will enlarge the viewport on the right, but does not do so in the LTR case where the text is placed out of view to the left.

Though I am not sure this case could be a dup of 1332959 or not.

Severity: -- → S3
Component: Panning and Zooming → Layout
Flags: needinfo?(hikezoe.birchill)
See Also: → 1659894
See Also: → 1332959
Webcompat Priority: P2 → ?
Webcompat Priority: ? → P3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: