Open
Bug 1332959
Opened 9 years ago
Updated 1 year ago
RTL web pages are aligned on the left side when the viewport is too small for the content
Categories
(Core :: Layout, defect, P3)
Tracking
()
NEW
| Tracking | Status | |
|---|---|---|
| firefox53 | --- | affected |
People
(Reporter: karlcow, Unassigned)
References
()
Details
Attachments
(1 file)
|
569 bytes,
text/html
|
Details |
This is related to https://webcompat.com/issues/4305
Steps to Reproduce:
0. With Firefox Android, go to http://www.haaretz.co.il/misc/writers/1.2557412
1. Once the page is loaded, note how the content is aligned on the left side.
(The content is larger than the viewport and can't be scrolled horizontally but that's another issue.)
Expected:
The content should be aligned on the right side, where the photos are and where the content starts. Chrome does it right. It also has a content larger than the viewport but the alignment is right.
Actual:
Content aligned on the left side.
|
Reporter | |
Updated•9 years ago
|
|
||
Comment 1•9 years ago
|
||
It is not really Android-specific. It can be reproduced with Responsive Design Mode as well.
OS: Android → All
Hardware: ARM → All
|
||
Comment 2•9 years ago
|
||
(In reply to Karl Dubost :karlcow from comment #0)
> (The content is larger than the viewport and can't be scrolled
> horizontally but that's another issue.)
Seems like the more urgent issue. Got a bug#?
Flags: needinfo?(kdubost)
|
|
Reporter | |
Comment 3•9 years ago
|
||
Jet,
not yet, but I'm planning to do that this week with the right test cases and references. :)
|
||
Comment 4•9 years ago
|
||
FWIW, it looks like the problem here occurs because the page is styled with CSS "direction: rtl" on the <body> element, not on the root <html> element. Moving the direction:rtl property to the root seems to resolve things.
Also, best practice for such a site would be to set the directionality using the HTML "dir" attribute, NOT the CSS "direction" property.
https://www.w3.org/International/questions/qa-bidi-css-markup
https://drafts.csswg.org/css-writing-modes-3/#direction
This doesn't alter the fact that we appear to have a bug here; but this particular site, at least, would work better if it followed the best practice of writing <html dir="rtl"> for its content, rather than styling it with "body { direction: rtl; }".
|
||
Comment 5•9 years ago
|
||
This is an old known issue with scrolling to negative values. For example, the testcase above should show gradient RGB colors, but due to the RTL container, it is impossible to see the left side. I am not sure if this is the same issue as noted above, but it looks similar to me.
|
|
Reporter | |
Comment 6•9 years ago
|
||
(In reply to Jet Villegas (:jet) from comment #2)
> (In reply to Karl Dubost :karlcow from comment #0)
> > (The content is larger than the viewport and can't be scrolled
> > horizontally but that's another issue.)
>
> Seems like the more urgent issue. Got a bug#?
Bug 1336346
And also https://mzl.la/2l3iDCb
Flags: needinfo?(kdubost)
Whiteboard: [webcompat]
|
|
||
Updated•8 years ago
|
Priority: -- → P3
|
||
Comment 7•6 years ago
|
||
Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.
Webcompat Priority: --- → ?
|
|
||
Comment 8•6 years ago
|
||
See bug 1547409. Migrating whiteboard priority tags to program flags.
|
||
Updated•6 years ago
|
Webcompat Priority: ? → revisit
|
||
Updated•3 years ago
|
Webcompat Priority: revisit → P3
|
||
Updated•3 years ago
|
Severity: normal → S3
The layout on Haaretz has since changed, and the issue no longer reproduces there. Likewise, www.cyberconnect.ir seems to no longer exist. Since we know of no breakage at the moment, let's remove the webcompat flags.
Webcompat Priority: P3 → ---
Whiteboard: [webcompat]
You need to log in
before you can comment on or make changes to this bug.
Description
•