css safari 字体模糊,悬停在Safari中的CSS过渡减轻了某些字体的颜色

没有更多的相关主题，我发现我遇到的问题，但这是涉及到上述问题。所以，对某些人可能会有所帮助。

两句话：我有一些容器(弹出)，里面有一些元素。 出现的方式如下：容器背景通过不透明度渐渐变暗，内部元素扩大(如从后面靠近我们)。一切都很好，但Safari(Mac/Win/iPhone)无法使用。 Safari“最初”显示我的容器，但它闪烁着一些奇怪的方式(出现微小的短暂闪烁)。

只加入-webkit-transform：translateZ(0); (对容器!!!)确实有帮助。

.container {

-webkit-transform: translateZ(0); /*

}

.container section {

-webkit-transform: translateZ(0) scale(.92); /*

-webkit-transition: -webkit-transform .4s, opacity .3s;

opacity:0;

}

.container.active section {

-webkit-transform:translateZ(0) scale(1);

-webkit-transition: -webkit-transform .3s, opacity .3s;

opacity:1;

}

但过渡发言，也有下面的代码部分：

.container {

...

top:-5000px;

left:-5000px;

-webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s;

}

.container.active {

-webkit-transition: opacity .5s;

top:0;

left:0;

width:100%;

height:100%;

}

考虑，我想显示/只使用CSS开关隐藏弹出(也使其消失，而不是“显示：无”)。 (显然)是继承了除“不透明”之外的转换属性，即使我只用-webkit-transition：opacity .5s重载了它们也是如此。

所以，添加下面的解决了这个问题：

.container {

...

-webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s;

}