IE10+ 溢出内的嵌套 3d 变换：自动是刹车：悬停行为答案

【问题标题】：IE10+ Nested 3d transforms inside overflow:auto are brake :hover behaviourIE10+ 溢出内的嵌套 3d 变换：自动是刹车：悬停行为
【发布时间】：2014-11-27 12:52:19
【问题描述】：

我在 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 设置列表项的样式 - 它们几乎不会突出显示
如果我们将溢出设置为hidden/visible，或者如果我们将删除任何transform - 那么:hover 就可以了。

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

什么可以解决这个问题？

【问题讨论】：

标签： html css internet-explorer transform

【解决方案1】：

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

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

transform: scale(-1, 1);

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

JSFiddle - Fixed for IE

但是，如果您尝试在 Chrome 中打开上述小提琴 （我使用的是 42 版 dev-m） - 您会看到呈现错误的滚动条。要修复它 - 只需向您旋转的所有元素添加零平移技巧（将这些元素移动到单独的图层上）

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

JSFiddle - Fixed for Chrome

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

附：但是 IE 渲染引擎中的 bug 仍然有效。这只是特定问题的解决方法。

附言还有 Chrome 渲染引擎中的错误

【讨论】：