html - IE10+ 嵌套 3d 变换内部溢出 :auto are brake :hover behaviour

Question

我在 IE 10-11 上使用 CSS 3d 转换时遇到问题
这是我简单化的 HTML 结构:

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

以及以下 CSS:

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

这是一个JS Fiddle

问题是我无法在 IE 中使用 :hover 设置列表项的样式——它们几乎从不突出显示
如果我们将 overflow 设置为 hidden/visible，或者如果我们将删除任何 transform - 那么 :hover 就可以了。

此外，在其他浏览器中效果很好。
而且，这与 transform-style: preserve-3d

无关

什么可以解决这个问题？

Answer 1

很长一段时间后，我在我的上下文中找到了问题的解决方案。

问题是我们有另一种从右到左旋转元素的方法:

transform: scale(-1, 1);

并且这种方法使用 2d 转换而不是 3d。 这解决了 IE 中的问题。

JSFiddle - Fixed for IE

但如果您尝试在 Chrome 中打开 above fiddle (我使用的是版本 42 dev-m) - 您会看到错误呈现的滚动条。要修复它 - 只需将零翻译黑客添加到您旋转的所有元素(将此元素移动到单独的层上)

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

JSFiddle - Fixed for Chrome

但这又会在 IE 中返回问题! 所以我不得不在这里使用浏览器检测

P.S. But bug in IE rendering engine is still valid. This is just workaround for particular problem.

P.S.S. And also bug in Chrome rendering engine