Bug in Chrome with position fixed and z-index



i've caught  a bug in chrome with problem position fixed


I've tried to find solution
There are advices:

1) Firstly, remove display: inline because, if you want the block-level element to be position: fixed, you cannot also have it inline. A fixed position element is outside the normal flow and therefore, by definition, cannot also be inline.
 2) Secondly, remove float: right since you want it fixed. According to the spec, it can't be both. "...if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'..." ~ W3C spec
 3) And finally, when using absolute or fixed (fixed is a subset of absolute according to the spec), set a position of the element by adding something like top: 0; and right: 0; which places it with respect to the edges of its parent.

But it doesn't help me

move on
i've found another advice
"Your problem is likely caused by Chrome reworking how position:fixed elements handle stacking of z-index. The change was made for Chrome v22 so if you built on v21 and use position:fixed, you might have a problem.
They suggested testing by hitting the Chrome special URL about:flags in the browser, and setting Fixed position elements create stacking contexts. to true (for v22+) or false (for v21).
It is possible to rework your CSS by ensuring position:fixed elements are stacking correctly. Unfortunately, it is a little complicated so recommend you read these for better explanation:"
Stacking changes coming to position:fixed elements
Elaborate description of Stacking Contexts


and finally 

FIX: add these rules to the position:fixed element:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);


Комментарии

Отправить комментарий