CODEWITHSUNDEEP
cssgoogle-chromewebkitright-to-left
clyfish
clyfish

Reputation: 10450

webkit rtl absolute position bug?

html:

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

css:

#outer {
    position: absolute;
    left: 100px;
    top: 0;
    width: 100px;
    height: 100px;
    direction: rtl;
    background-color: blue;
}
#inner {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

In Chrome, the yellow box is outside of the blue box.

In other browers(firefox, IE), the yellow box is inside the blue box.

Is it a bug of webkit, and why?

a test case on jsfiddle: http://jsfiddle.net/QF9tT/

Upvotes: 0

Views: 5218

Answers (1)

thirtydot
thirtydot

Reputation: 228162

You should simply remove display: inline-block from #inner.

See: http://jsfiddle.net/QF9tT/1/

position: absolute will force a computed display value of block, so display: inline-block should not be doing anything whatsoever:

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, .., and display is set according to the table below.

[inline-block = block]

But, it appears in this case that this behaviour is buggy in Chrome.

You should consider filing a report here: http://code.google.com/p/chromium/issues/list

Then again, the issue is easy to fix: don't specify a nonsensical display value on an absolutely positioned element.

Upvotes: 4

Related Questions