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;
}

在这个例子中，上面的六边形在悬停到-same-size时会改变，因为另一个加载了。

在Chrome 50中，后元素的背景图像消失且宽高比崩溃
在IE 11中，只有边缘的纵横比崩溃
在Firefox 46中，一切正常

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

是否存在已知和可修复的问题？

Answer 1

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

只有通过切换到javascript动画并通过强制重新渲染来解决它：

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

使用jQuery，您可以在animate（）函数的progress-Parameter中执行此操作。

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

CSS3-After-Element-Transformation无法跨浏览器工作？

1 个答案: