Element with large negative `text-indent` breaks viewports on sites with `direction: rtl`
Categories
(Core :: Layout, defect)
Tracking
()
Webcompat Priority | P3 |
People
(Reporter: denschub, Unassigned)
References
Details
Attachments
(1 file)
538 bytes,
text/html
|
Details |
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.
Reporter | ||
Comment 1•3 years ago
|
||
Forgot to add an important thing: Chrome has no issues with this, and renders both divs the same width!
Comment 2•3 years ago
•
|
||
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?
Comment 3•3 years ago
•
|
||
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.
Comment 4•3 years ago
|
||
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.
Updated•3 years ago
|
Reporter | ||
Updated•2 years ago
|
Description
•