CODEWITHSUNDEEP
cssgoogle-chromeright-to-left
Mythica
Mythica

Reputation: 1122

Horizontal scrollbar in Chrome with direction RTL

On Chrome there is a horizontal scrollbar on a page with direction rtl in combination with margin-right: auto and overflow: auto even though there is no margin and no content.

For an example, see https://jsfiddle.net/ht3drjae/2/. I would expect to see no green background color and no horizontal scrollbar as inner and outer should have the same width.

The scrollbar is only there on Chrome, but not on Firefox or IE. So why is the scrollbar there? Is this a browser bug?

HTML:

<div class="outer">
    <div class="inner"></div>
</div>

CSS:

body {
    direction: rtl;
}
.outer {
    height: 500px;
    overflow: auto;
    background: green;
}
.inner {
    height: 1000px;
    margin-right: auto;
    background: red;
}

Upvotes: 4

Views: 5865

Answers (3)

Sohrab Taee
Sohrab Taee

Reputation: 760

You need to set direction: ltr on your body tag, wrap the whole content of page in a div and set its direction to rtl.

Upvotes: 4

Nandu Hulsure
Nandu Hulsure

Reputation: 133

I hope the below code can solve the issue:

.outer {
    height: 500px;
    overflow: hidden;/changed to hidden/
    background: green;
}

overflow:hidden;

and its always better to use direction with html markup like

instead with CSS declaration.

Upvotes: 0

Luizgrs
Luizgrs

Reputation: 4873

I believe it's a bug:

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.

If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

If there is exactly one value specified as 'auto', its used value follows from the equality.

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

http://www.w3.org/TR/CSS2/visudet.html#blockwidth

For you example, the computed values for .inner are

margin-left: 0 (initial value)
border-left-width: 0 (because boder-style initial value is none)
padding-left: 0 (initial value)
width: auto (initial value)
padding-right: 0 (initial value)
border-right-width: 0 (because boder-style initial value is none)
margin-right: auto

So what should occur is:

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

.inner width should have same width as its parent and thus no horizontal scrollbar should appears.

If we also changes direction to ltr and margin-left:auto or margin-right:auto it does not occurs, so it looks like the issue occurs only when the direction is rtl.

Upvotes: 3

Related Questions