html - IE10+ Nested 3d transforms inside overflow:auto are brake :hover behaviour -


i have trouble css 3d transforms on ie 10-11
here simplyfied html structure:

<ul>     <li>item 1</li>     ...     <li>item 12</li> </ul> 

and following css:

ul {       white-space: nowrap;     overflow: auto;     transform: rotatey(180deg); } li {     display: inline-block;     transform: rotatey(180deg); } 

here js fiddle

the problem can't style list items :hover in ie - highlighting hardly ever
if set overflow hidden/visible, or if remove transform - :hover do.

also, in other browsers works great.
, also, not related transform-style: preserve-3d

what can fix problem?

after long time got solution problem in context.

the thing have aproach rotate element right-to-left:

transform: scale(-1, 1); 

and approach uses 2d transformation instead of 3d. fixes problem in ie.

jsfiddle - fixed ie

but if try open above fiddle in chrome (i used version 42 dev-m) - you'll see wrong rendered scrollbar. fix - add 0 translation hack elements rotate (to move elements on separate layer)

transform: scale(-1, 1) translate3d(0,0,0); 

jsfiddle - fixed chrome

but this, again, return problem in ie! had use browser detection here

p.s. bug in ie rendering engine still valid. workaround particular problem.

p.s.s. , bug in chrome rendering engine


Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -