CSS3-After-Element-Transformation 不能跨浏览器工作？

Question

我认为我的动画六边形实现有几个跨浏览器问题: http://jsbin.com/mojavowapi/1/edit?css,output

.hexagon {
    position: relative;
    width: 173px;
    height: 300px;
    background-image: url(https://live.tlprod.de/temp/glas.jpg);
    background-size: auto 100%;
    background-position: 50% 50%;
    transition: all 2s linear;
    margin-left: auto;
    margin-right: auto;
}

.hexagon:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: inherit;
}

.hexLeftBox, .hexRightBox {
    overflow: hidden;
    transform: scaleY(1.6) rotate(-45deg);
    background: inherit;
    top: 27.9%;
    position: absolute;
    display: inline-block; /* let the block get the width of the containing image */
    z-index: 1;
    height: 44%;
}

.hexLeft, .hexRight {
    width: auto;
    height: 100%; /* get full height of parent element, set width to aspect ratio 1:1 */
}

.hexLeftBox {
    transform: scaleY(1.6) rotate(-45deg) translate(-35.5%,-35.5%);
}

.hexRightBox {
    right: 0;
    transform: scaleY(1.6) rotate(-45deg) translate(35.5%,35.5%);
}

.hexLeftBox:after, .hexRightBox:after {
    content: "";
    position: absolute;
    width: 142%;
    height: 142%;
    transform: rotate(45deg) scaleY(1) scaleX(1.6) translate(-50%,0%);
    transform-origin: 0 0;
    background: inherit;
    transition: all 2s linear;
}

.hexLeftBox:after {
    background-position: -7% top;
}

.hexRightBox:after {
    background-position: 107% top;
}

.hexagon:hover {
    width: 300px;
    height: 350px;
}

.hexagon:hover .hexLeftBox:after {
    background-position: -35% top;
}

.hexagon:hover .hexRightBox:after {
    background-position: 135% top;
}

.hexagon2 {
    width: 300px;
    height: 350px;
    margin-top: 40px;
}

.hexagon2 .hexLeftBox:after {
    background-position: -35% top;
}

.hexagon2 .hexRightBox:after {
    background-position: 135% top;
}

在此示例中，上面的六边形在悬停时更改为与加载的另一个相同的大小。

• 在 Chrome 50 中，后元素的背景图像消失并且宽高比崩溃

• 在 IE 11 中只有边缘的宽高比崩溃

• 在 Firefox 46 中一切正常

..但有趣的是:在所有浏览器中，与悬停具有相同值的第二个静态版本工作正常。

是否存在一些已知且可修复的问题？

Answer 1

宽高比崩溃是一个 webkit 优化问题。

它只能通过切换到 javascript 动画并通过以下方式强制重新渲染来修复:

$('body').css('display', 'table').height();
$('body').css('display', 'block');

使用 jQuery，您可以在 animate() 函数的进度参数中执行此操作。

切换到 javascript 动画也会消除消失的后元素。