Safari中CSS转换转换z-index冲突(在Chrome/FF上运行) [英] CSS transition transform z-index conflict in Safari (Works on Chrome / FF)

问题描述

我正在使用CSS过渡和旋转效果来显示名片.我可以使所有功能在Chrome和FF中正常运行，但在Safari中会扭曲div.

I am playing around with CSS transition and rotate effects for displaying a business card. I got everything to function properly in Chrome and FF but in Safari it distorts the div.

我尝试将以下属性无济于事:

I tried applying the following properties to no avail:

transform: translateZ(0px);
transform-style: flat;
transform: translate3d(0,0,0);

有关以下代码和图片，请参见 Codepen :

See Codepen for code and pics below:

Safari:

Chrome:

推荐答案

我认为这是堆栈引用和CSS转换冲突的问题.

I believe this is an issue with stacking references and CSS transforms clashing.

尝试添加:

-webkit-transform: translate3d(0,0,0); 

到卡片的父元素.那应该形成变换后的子对象，以服从Z索引堆叠.

to the parent element of your card. That should form the transformed children to obey the z-index stacking.

如果其他人对此有所投入，那就太好了.

If anyone else has some input on this that would be great.

这篇关于Safari中CSS转换转换z-index冲突(在Chrome/FF上运行)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！