我认为我的动画六边形实现有几个跨浏览器问题: 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 中一切正常
..但有趣的是:在所有浏览器中,与悬停具有相同值的第二个静态版本工作正常。
是否存在一些已知且可修复的问题?
最佳答案
宽高比崩溃是一个 webkit 优化问题。
它只能通过切换到 javascript 动画并通过以下方式强制重新渲染来修复:
$('body').css('display', 'table').height();
$('body').css('display', 'block');
使用 jQuery,您可以在 animate() 函数的进度参数中执行此操作。
切换到 javascript 动画也会消除消失的后元素。
关于CSS3-After-Element-Transformation 不能跨浏览器工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37624349/