我在Safari和Firefox(Mac / Yosemite)上出现了这个奇怪的问题,当将鼠标悬停在转换元素上时,几乎所有页面上的文本都会闪烁.
示例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)); }
我尝试了以下几点:
将这些样式的所有可能组合添加到身体,转化元素和/或其父代
-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); -moz-transform: translate3d(0,0); -webkit-transform: translate3d(0,0); transform: translate3d(0,0); -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke: 0.35px;
如果(样式如下)适用于身体,则问题在Safari中是固定的,但不在Firefox中,因为它不是webkit浏览器.
-webkit-transform: translate3d(0,0); -webkit-text-stroke: 0.35px;
我真的不知道是什么原因造成的,我该如何解决它!