CSS3变换导致文本在Safari和Firefox Mac Yosemite中闪烁 [英] CSS3 Transform causing text to flicker in Safari and Firefox Mac Yosemite
问题描述
我在Safari和Firefox(Mac / Yosemite)上遇到这个奇怪的问题,导致当鼠标悬停在转换元素上时,页面上的几乎所有文本都会闪烁。
I'm having this weird issue on Safari and Firefox (Mac/Yosemite) that causes almost all of the text on the page to flicker when hovering over the transforming element.
示例gif:(Firefox,Yosemite)
Example gif: (Firefox, Yosemite)
.usp {
//USP has an icon that is defined below
opacity: .4;
@include transition(all .3s ease-in-out);
&:hover {
opacity: 1;
@include transition(all .3s ease-in-out);
.icon {
@include transform(scale(1.1));
@include transition(all 1.7s ease-in-out);
}
} // :hover
}
.usp .icon {
display: block;
height: 75px;
width: 75px;
// Insert background-image sprite (removed from this example)
@include transition(all .3s ease-in-out);
@include transform(scale(1.0));
}
我尝试过以下操作:
将这些样式的每个可能组合添加到正文,变换元素和/或其父
Add every possible combination of these styles to the body, the transforming element and/or his parent
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-filter: opacity(.9999);
-webkit-font-smoothing: antialiased;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke: 0.35px;
如果(样式如下)应用于正文,问题在Safari中修复,因为它不是webkit浏览器。
If (styles below) are applied to the body, the problem is fixed in Safari but not in Firefox as it is not a webkit browser.
-webkit-transform: translate3d(0, 0, 0);
-webkit-text-stroke: 0.35px;
我真的不知道是什么原因导致这个问题,我怎么解决它!
I have literally no idea what causes this and how I can fix it!
推荐答案
好的!
经过一个星期的测试,删除和添加CSS规则解决了我的问题。我原来在Firefox 39和Safari 9中都有这个问题,但是Firefox用最新的更新程序神秘地修复了自己。 Safari然而,没有。问题与页面上元素的3D渲染有关。我试图缩放的元素必须转换为3D上下文,页面上的闪烁元素在2D和3D之间切换,如@ Woodrow-Barlow在其他答案中解释。
After a week of testing, removing and adding CSS rules I finally found the solution that fixed my problem. I originally had this problem in both Firefox 39 and Safari 9 but Firefox mysteriously fixed itself with the latest update. Safari however, did not. The problem has to do with the 3D rendering of elements on the page. The element I tried to scale had to be transformed into 3D context, the flickering elements on the page switched between 2D and 3D as explained by @Woodrow-Barlow in the other answers.
添加
-webkit-transform: translate3d(0, 0, 0);
,因此在页面加载时将它们呈现为3D,他们不再需要切换!
to the flickering elements, and thus rendering them in 3D on page load, they no longer had to switch!
编辑1 :对于在其他浏览器中有此问题的用户,请查看CSS的will-change属性:
https://dev.opera.com/articles/css-will-change-property/
EDIT 1: For people who have this issue in other browsers, take a look at the CSS 'will-change' property: https://dev.opera.com/articles/css-will-change-property/
这篇关于CSS3变换导致文本在Safari和Firefox Mac Yosemite中闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!