Macbook retina CSS: scrollable div scrollbar overlapped by parent scrollbar

Question

Found a strange problem, did some googling and didn't find anyone with similar issues.

In short. I have a position fixed div inside another position fixed div. On non-retina, everything's fine, but on macbook retina (webkit browsers) scrollbar of the parent overlaps scrollbar of the div that should be on top:

http://jsfiddle.net/3by6ohq0/

position:fixed

Does anyone have any ideas? Thanks in advance.

Visual comparison of non-retina vs. retina:

https://i.stack.imgur.com/hk9jN.png

Answer 1

The reason behind this relates to your usage of pixels. Right now, your inner fixed div of class "floating" you have set to:

right:7px;

In your hope to make it off the scrollbar. However, for your unfortune, scrollbars are not all the same width in every operating system. On the Retina Macbooc Pro,there are more pixels that make up the width of the scrollbar (so it's not really tiny to your eye), probably 2X the amount, and therefore that 7px right does not justify for the greater amount of pixels. Nor does it on Ubuntu which I use. The best method would be this:

.floating {
    position:relative;
    float:right;
}

Or even absolute positioning would be better than fixed. Because right now since the parent element has a fixed position, the child element is actually justifying its position to the body, or the parent element of its parent element.