Safari:在滚动上使用css动画时文本抖动
Safari是苹果公司开发的一款网页浏览器。在使用CSS动画进行滚动时，有时会出现文本抖动的问题。这是因为在Safari浏览器中，CSS动画的滚动效果会导致文本渲染不稳定，从而产生抖动现象。
为了解决这个问题，可以尝试以下几种方法：
- 使用transform属性：将滚动的元素设置为一个新的图层，可以使用CSS的transform属性来实现。例如，可以将滚动元素的CSS样式设置为：
transform: translateZ(0);。这样可以将元素放置在一个新的图层中，提高渲染性能，减少抖动现象。 - 使用will-change属性：将滚动的元素设置为will-change属性，可以告诉浏览器该元素将要发生变化，从而提前进行优化。例如，可以将滚动元素的CSS样式设置为：
will-change: transform;。这样可以提醒浏览器该元素将要进行变换，从而优化渲染过程，减少抖动现象。 - 使用硬件加速：可以通过使用CSS的transform属性或者使用CSS的3D变换来启用硬件加速。例如，可以将滚动元素的CSS样式设置为：
transform: translateZ(0);或者transform: translate3d(0, 0, 0);。这样可以将元素放置在一个新的图层中，并启用硬件加速，提高渲染性能，减少抖动现象。 - 使用requestAnimationFrame方法：可以使用JavaScript的requestAnimationFrame方法来优化滚动动画的性能。该方法可以在浏览器的下一次重绘之前执行指定的函数，从而提高动画的流畅度。例如，可以使用以下代码来实现滚动动画：
function scrollAnimation() {
// 滚动动画的逻辑代码
// ...
requestAnimationFrame(scrollAnimation);
}
requestAnimationFrame(scrollAnimation);以上是解决Safari浏览器中滚动使用CSS动画时文本抖动的一些方法。希望对您有帮助！
腾讯云相关产品和产品介绍链接地址：
相关·内容
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=rightbanner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.221 Safari/537.36 SE 2.X MetaSr
浏览 487提问于2018-02-02
3回答
我对现有的视差库不满意，所以我尝试写我自己的。我目前的一门课由三门主要课程组成：
ScrollDetector跟踪元素相对于屏幕的滚动位置；它具有返回表示其当前位置的浮点数的函数：
0表示位于视图端口底部边缘的元素的上边缘。
1表示位于视图端口顶部边缘的元素的底部边缘。
所有其他位置都是线性插值/外推的。
ScrollAnimation使用一个ScrollDetector实例根据ScrollDetector元素在另一个元素上插值任意CSS值。
ParallaxativeAnimation为背景图像的特殊情况扩展了ScrollAnimation，该背景图
浏览 1提问于2017-11-15得票数 31
1回答
CSS动画重载CPU
、、、
我有一个动画和JS交替2个div和改变他们的背景图像(从几十个图像阵列)，某种可互换的div。一切都很好，但是当动画运行时，我可以看到我的CPU是100%。起初，我认为这可能是setInterval造成的，但是当我将代码从交替图像改为每次迭代增加一个数字并将其记录到控制台时，我看到CPU负载急剧减少，大约减少了40%-50%。所以我知道这可能是动画造成的。
以下是我的HTML代码：
<div class="wallpaper wallpaper-1" id="wallpaper-1"></div>
<div class="w
浏览 5提问于2016-02-21得票数 5
许多博客都表示，通过使用transform: translateZ(0)加速动画和过渡，“欺骗”图形处理器使其认为元素是3D元素，从而获得了性能增益。我想知道以以下方式使用此转换是否会有影响：
* {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
浏览 2提问于2012-05-30得票数 105
回答已采纳
我有一个问题的CSS动画在Chrome浏览器上，在iOS设备上。动画正在捕捉到位，并且不平滑。在Safari、Firefox或桌面Chrome上，一切都运行得很好。 这是一个简单的例子，它在iOS版的Chrome上是滞后的： .test {
width: 50px;
height: 50px;
background: pink;
transition: 2s;
}
.test:hover {
width: 100px;
height: 100px;
background: yellow;
transform: translateX(30px);
} &l
浏览 37提问于2019-05-16得票数 4
4回答
之前买的服务器可以退款么？你这活动力度好大啊
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=banner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 1602提问于2018-01-20
我正在为一个Webapp创建一个复杂的原型(我正在使用Cordova将它部署到我的iPhone上)，我遇到了以下问题：
DOM-元素(不是使用JavaScript创建，而是在静态HTML中创建)是存在的(它们在检查器中以正确的大小显示)，但它们是不可见的。有时它们只是不被显示，有时是部分地显示，有时它们的一部分被显示在不同的位置。检查员总是在正确的位置展示他们的“身体”。
有一种奇怪的解决方案:一旦CSS属性在加载后被更改(例如，取消检查和检查检查器中任何元素的任何属性--有时以编程方式更改属性也有效)，它们就会正确地显示出来。这个问题既出现在Safari和Chrome中，也出现在Firefo
浏览 2提问于2015-06-24得票数 12
5回答
我一整天都在捣乱，似乎找不到解决办法。
我有一个简单的ul，它使用以下css充当固定的标题：
body {
width: 100%;
height: 100%;
min-height: 100%;
}
.stream .header {
position: fixed;
width: 100%;
height: 41px;
top: 0;
right: 0;
left: 0;
z-index: 10;
margin-bottom: 10px;
list-style: none;
浏览 2提问于2013-10-11得票数 10
回答已采纳
1回答
静态定位大大降低了性能(?)
、、、、
我正在构思一个想法，突然偶然发现了一些奇怪的渲染性能问题。我创建了一个CodePen来说明这个想法，它是一个导航元素，当它与页脚“碰撞”时，导航元素从position: fixed变为position: static。所以看起来是脚把它推上去的。
当位置模式发生变化时，没有问题的JS (我尝试过没有JS)降低了性能。正是我找到了CSS属性，使得浏览器在滚动时渲染起来要重得多。
在IE10/Firefox中，它似乎工作得很好，在Chrome中，人们可以从网络检查员fps表中看到，渲染起来要重得多。
不过，我发现的最奇怪的一点是，在Safari中，呈现的速度要慢得多。但是在position: fi
浏览 1提问于2015-11-12得票数 5
回答已采纳
3回答
我试图找出动画极度减速的原因。如您所见(如下所示)，油漆次数偶尔会激增，导致帧速率下降到< 15 fps。
我不能显示该网站，但我可以告诉你，它是而不是轻量级的前端，它是一个设计展示网站，所以有大量的大型图像动画从外部的视图端口。我需要确定这是否只是他们必须处理的事情，或者如果可以做什么来减少油漆的时间。
所有动画都是使用translate()函数实现的。这组特定动画的CSS如下：
.page {
height: 100%;
position: absolute !important;
-webkit-transform: translateY(100%);
浏览 2提问于2014-11-07得票数 5
回答已采纳
2回答
问题：为什么我的CPU在应用模糊时注册~30%，而当没有将模糊应用于动画对象时则注册~6%？
详细信息：
我在页面上有一组随机生成的项，其中分配了CSS动画(在CSS文件中)，并随机生成了宽度、高度，更重要的是，模糊，应用内联。
CSS文件样式如下所示：
animation-name: rise;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-backface-visibility: hidden;
-webkit-perspecti
浏览 2提问于2016-02-09得票数 8
回答已采纳
我的环境(在这里我得到了滞后)：
Mac Capitan 10.11.2 Chrome版50.0.2661.102 (64位)
CODEPEN:
动画：
形势：
我在谷歌上搜索了很多，却没有找到对我有用的东西。我知道以前有人问过这个问题。
当我用Safari和火狐打开网站时，CSS3动画在我的Mac上是平滑的，但不是用Chrome！
奇怪的是，最初的CodePen在Chrome上是光滑的。
问题：
在我的代码中有些东西导致动画只在Chrome上变得不稳定。它是什么，我怎样才能修好它？
我所看到的：
我需要我的定位相对适应不同的屏幕大小。
浏览 3提问于2016-06-04得票数 68
回答已采纳
当使用缩放来更改包含文本的HTML元素的大小时，文本在动画期间会产生抖动，但只在使用JavaScript库动画的情况下。
当动画变慢，文本变小时，抖动是最明显的。我似乎不知道是什么原因造成的，也不知道如何摆脱它。
这种抖动不会在CSS动画或使用相当新的JavaScript网络动画API的动画中发生。在某些浏览器中似乎也没有发生这种情况。(在我的iPhone)
为了方便地比较不同的元素缩放方法和它们的显示方式，我制作了一个，以便于使用。在检查之前，请注意以下几点：
所有的动画都是使用一些形式或模仿的CSS属性transform: scale(num);的动画，并有相同的放松和持续时间，使他们
浏览 4提问于2017-06-09得票数 1
我刚建了一个网站：
在头版上我有一个幻灯片(糟糕的UX -我知道)。如果你点击右下角的一个小方型图标，滑块就会有动画效果。
这是很好的工作，除了在铬的mac。每次滑块动画，所有的元素定位绝对将做一个微小的像素跳跃。然而，滑块上的动画使用transform: transform()来执行动画。js只是交换类--没有实际动画--这都是由css处理的。
有没有人知道这是为什么，以及是否有可能解决这个问题？
任何帮助都将不胜感激。
浏览 0提问于2014-03-24得票数 2
回答已采纳
我正在建立一个手风琴与动画高度开放/关闭，其中内容高度是通过JS计算。我想确保最好的性能，所以我考虑的是强制硬件加速。
.accordion-item-content {
overflow: hidden;
transition: height .3s ease;
transform: translateZ(0);
will-change: transform;
}
在Chrome工具中，我可以看到每个手风琴项目都得到了一个层(因为将更改和/或转换属性)，但是这会导致性能的提高吗？或者是转换、不透明和过滤，这是唯一可以从GPU呈现中获益的属性，正如我在这里所理解
浏览 2提问于2016-02-12得票数 5
回答已采纳
标准是什么？
在下面的示例中，我正在为CSS transform动画，当您单击任何地方(而在Google中)时，动画就会被一个2秒长的while循环所阻塞。
为什么CSS transform动画被封锁？
编辑：最近在主线程被阻塞时不再阻塞transform，这表明它们已经将下面示例中的动画从主线程移出。
动画转换可以在单独的线程上进行，但具体时间还不清楚。有时候很管用。
在第一个示例中，不会发生单独的线程转换动画(单击它可以阻止主线程，从而暂停动画)：
window.addEventListener('click', kill)
function kill() {
v
浏览 0提问于2019-04-04得票数 38
我使用css3透视图和translateZ，创建了一个覆盖流。
它也有一个过渡的效果时，点击通过。它在Chrome和IE10以及移动Safari 7上运行得很好，但是在火狐和桌面Safari上没有什么问题。
在Firefox(最新的29.0.1版)上，点击图片不会使其回到零位置(平面视图)。另外，您也不能通过下面的层单击。如果第一个图像是当前图像，则不能直接单击第三个图像，除非您单击第二个图像并使其成为当前的第一个图像。
在桌面Safari (5，在PC和MAC上)，过渡部分工作，不是顺利，但可以接受。主要的问题是，无论您单击哪个映像，它都会立即触发下载，而代码应该只在图像是当前图像时
浏览 4提问于2014-05-29得票数 1
我试图在我正在工作的一个网站的一些标题上应用一些CSS3转换，但是在包含文本的元素上的转换确实让我感到困扰:在浏览器中应用提示或网格适配字体的字形(我猜是大多数，除了Safari)，在转换的开始和结束处有一个明显的‘跳转’，你可以看到文本被捕捉回像素网格，如jsfiddle所示： (这可能是由于过滤造成的短暂的‘模糊’，但这里肯定有一些形状修改，至少在FF和Chrome中)
通常我甚至不会考虑处理错综复杂的字体渲染，但考虑到字形如此之大，我觉得在这种情况下这并不重要，我想知道是否有一种方法可以禁用提示，或者其他一些方法来使这些转换更流畅。有没有人知道这是否可以做到，以及如何做到？
PS:这个问
浏览 0提问于2012-03-15得票数 28
1回答
我正在努力优化我的网页应用程序的滚动。我有大量数据的数据表，滚动变得非常糟糕。我将will-change: transform添加到数据表中，但它破坏了我的表标题，即position: fixed (我修改了它们以允许它们与视图一起滚动)。这些元素根本不与视图一起移动，它们只是停留在文档的流中。
但偶然地，我发现，如果我使用will-change:opacity，我的固定标题是好的。有人能解释一下这种行为吗？我还没有找到任何文件表明他们应该采取不同的行动。
这是一个代码笔，其中有一个我所说的例子。在两个值之间切换，并在蓝色div中滚动。
这也是笔上的基本代码：
html：
<div
浏览 3提问于2017-10-09得票数 3
回答已采纳
1回答
我得到了一个很好的position:absolute头文件(使用渐变和transform3d来做一个很好的动画-让头文件平滑地向下移动约80px)，当我点击~150px的滚动条时，我将他的位置改为fixed -做动画。
在Safari mobile中，当动画完成时，只有50%的导航栏会出现，并停留在页面的顶部。另外50%只有在我完全停止滚动动画并将手指从屏幕上移开时才会出现。我已经应用了transform: translate3d(0,0,0);和-webkit-transform: translateZ(0px);来启用硬件加速，但结果保持不变。.navbar是一个.row，里面有2个基本上
浏览 10提问于2016-08-16得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
