CSS Animation triggers text rendering change in Safari
薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗。这是什么鬼???
待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此:
- Banner 以下的文字都会间歇性闪(chou)烁(feng)。
- 鼠标移动到某个产品图上,在该元素以后区域的文字也会闪烁,而之前的元素都没问题。
通过现象可以观察到文字闪烁基本和动画有关,Banner 轮播图用到了 transform: translate3d,产品展示图缩放效果用到了transform: scale
那么除了动画以外影响字体渲染的CSS属性还有这些:
font-style //字体样式
font-variant //字体大小写
font-weight //字体重量值
font-size //字体大小
font-family //字体型号
font-smoothing //字体平滑属性
因为目前新版用到 BootStrap3,先确认下是自己的代码引发的问题还是 BootStrap3,带着疑问去了躺 BootStrap3 官网,找到轮播图的例子:
http://v3.bootcss.com/examples/carousel/
如果你在Mac Safari 打开上面链接会发现轮播图下方的文字都会随着动画而闪烁。
接下来分析是什么原因导致了这个bug的出现,通过对比分析发现在 BootStrap3 中 container 和 row 元素都用到了 position:relative 属性,而这两个元素都是嵌套使用,那么通过最简代码来复现该问题:
html
<div class="box">
<p>CSS Animation triggers text rendering change in Safari</p>
</div>
<div class="animation"></div>
<div class="box">
<p>CSS Animation triggers text rendering change in Safari</p>
</div>
css
<style scoped="scoped">
.animation {
width: 100px;
height: 100px;
background-color: gray;
-webkit-transition:all 0.35s ease-in-out;
}
.animation:hover {
-webkit-transform: rotate(360deg);
}
.box, .box > p {
font-size: 20px;
position: relative;
}
</style>
上面的例子中,当鼠标滑动到 animation 元素上,后面的 box 就会出现文字闪烁,而之前的元素没有问题。
触发 transform +transition 属性的元素原本只会影响自身的字体渲染,从动画开始到结束,分别经历 Subpixel rendering -> Grayscale rendering -> Subpixel rendering,所以会出现闪烁现象,我们一般通过对自身设置 -webkit-backface-visibility: hidden 来解决。但是在Mac Safari 下还会影响其后面嵌套两层以上CSS position取值为 relative、absolute 元素字体的渲染。
解决方案
// W3C官方已经废弃该属性
-webkit-font-smoothing: subpixel-antialiased
相关问题的回答
- How to prevent Webkit text rendering change during CSS
transition - Prevent flicker on webkit-transition of webkit-transform
- CSS Animation triggers text rendering change in Safari & Chrome (Webkit)
- Safari bug: text suddenly appears bold after css animation completes (antialiasing change)
相关问题的延伸阅读
CSS Animation triggers text rendering change in Safari的更多相关文章
- 利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
- CSS animation & CSS animation 101
CSS animation 101 如何为 Web 添加动画效果. https://github.com/cssanimation/css-animation-101 https://github.c ...
- OpenCascade Chinese Text Rendering
OpenCascade Chinese Text Rendering eryar@163.com Abstract. OpenCascade uses advanced text rendering ...
- Using native GDI for text rendering in C#
Using native GDI for text rendering in C# Aug12by Arthur To complete my previous post on text render ...
- CSS魔法堂:更丰富的前端动效by CSS Animation
前言 在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style
We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- css animation @keyframes 动画
需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes 做动画 html <span class="horn" :class=& ...
随机推荐
- 【ZZ】各类程序开发语言概述 | 菜鸟教程
http://www.runoob.com/w3cnote/programming-intro.html 各类程序开发语言概述, 点击查看大图:
- 在eclipse中使用mybatis-generator自动创建代码
1.eclipse中安装插件,地址:http://mybatis.googlecode.com/svn/sub-projects/generator/trunk/eclipse/UpdateSite/ ...
- 基于指纹考勤机的真实的PHP操作Access数据库成功案例(最终实现) 2011-11-2v
听了我的建议,我们单位的食堂准备使用一台指纹考勤机统计吃饭人次,这样院里好给食堂的承包人以相应饭补.以前买过一台彩屏指纹机,数据库是access的,今儿又买了一台准备放到食堂里,而且考虑到停电,还特地 ...
- py基础3--函数,递归,内置函数
本节内容 函数基本语法及特性 参数与局部变量 返回值 嵌套函数 递归 匿名函数 函数式编程介绍 高阶函数 内置函数 1. 函数基本语法及特性 背景提要 现在老板让你写一个监控程序,监控服务器的系统状况 ...
- 详解Oracle的几种分页查询语句
转载自:http://database.51cto.com/art/200904/118737.htm 分页查询格式: SELECT * FROM (SELECT A.*, ROWNUM RN FRO ...
- gSOAP:C++编写服务器端
1.编写头文件cal.h: //gsoap ns service name: calc //gsoap ns service style: rpc //gsoap ns service encodin ...
- MS-TEST 批处理执行测试时的资源文件目录问题
What: 使用MS-TEST的 批处理执行它的测试 DLL 时,如: MSTest /testcontainer:C:\David\ADAccountGIT\AdAccountMSTest\ADA ...
- 3 MySQL数据库--初识sql语句
1.初识sql语句 服务端软件 mysqld SQL语句:后面的分号mysql -uroot -p123 操作文件夹(库) 增 create database db1 charset utf8; 查 ...
- 【转】mac os、linux及unix之间的关系
mac os.linux及unix之间的关系 unix 是由贝尔实验室开发的多用户.多任务操作系统 linux是一类Unix操作系统的统称,严格来说,linux系统只有内核叫“linux”,而li ...
- 小菜鸟入门nginx
实现功能:端口进行转发 比如我实际运行的是·http:localhost:5000 但是我想通过localhost:80 进行访问. 过程 1 下载nginx 2 解压到某个目录(比如我放在C盘根目录 ...