HTML + CSS无限滚动背景:在Safari上重复闪烁
HTML + CSS无限滚动背景是一种通过HTML和CSS技术实现的背景效果，可以在网页中创建一个无限滚动的背景图像或颜色。在Safari浏览器上，可能会出现重复闪烁的问题，这是由于Safari对CSS动画和过渡的处理方式不同于其他浏览器所导致的。
为了解决在Safari上重复闪烁的问题，可以尝试以下方法：
- 使用
-webkit-backface-visibility属性：将背景元素的CSS样式中添加-webkit-backface-visibility: hidden;，这可以防止Safari对元素进行重复渲染，从而减少闪烁的可能性。 - 使用
-webkit-transform属性：将背景元素的CSS样式中添加-webkit-transform: translateZ(0);，这可以触发Safari的硬件加速，提高动画的流畅度并减少闪烁。 - 使用
requestAnimationFrame函数：使用JavaScript的requestAnimationFrame函数来执行动画，而不是使用CSS的animation或transition属性。requestAnimationFrame函数可以更好地控制动画的渲染，减少闪烁的可能性。
以下是一些腾讯云相关产品和产品介绍链接地址，可以帮助您更好地实现和优化无限滚动背景效果：
- 腾讯云CDN（内容分发网络）：提供全球加速、高可用的静态资源分发服务，可以加速背景图像的加载和传输。了解更多：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，可以用于部署和运行网页应用程序。了解更多：https://cloud.tencent.com/product/cvm
请注意，以上提到的产品和链接仅作为示例，您可以根据具体需求选择适合的产品和服务。
相关·内容
2回答
HTML + CSS无限滚动背景:在Safari上重复闪烁
html、css、safari
我正在创建一个有一堆滚动图层(前景，中景，背景等)的场景。但令人恼火的是，当动画重启时，我在Safari (14.0.3)上看到闪烁。这在Chrome或Firefox上不会发生。1696px; */ min-width: 6784px;
background-image: url("https://brendon.github.io/safa
浏览 47提问于2021-05-17得票数 5
回答已采纳
1回答
iPhone Safari在html标记之外滚动
html、ios、css
我一直在学校的移动网站上工作，我似乎对移动Safari中的滚动有问题。如果您在您的上访问iPhone，它将滚动到页面底部，并偶尔将部分页面内容隐藏在蓝色背景下。使用Safari检查器，我似乎正在滚动通过<html>标记。但这是Safari滚动条出现的时候。当滚动到上面时，滚动条不会闪烁，只有在页面结束时才会闪烁。任何帮助都将不胜感激。
浏览 1提问于2015-07-20得票数 4
回答已采纳
2回答
CSS背景下的Safari问题
css、background、safari
这段代码似乎可以在除Safari之外的所有应用程序上运行。背景:url(“/images/nav.png”)无重复滚动中心/ 17px 17px rgba(0，0，0，0)背景:url(“&#x
浏览 1提问于2014-04-08得票数 1
3回答
带有Div或HTML覆盖和mootools Fx.Slide的闪存
flash、html、mootools、overlay
我尝试了一系列不同的CSS变体来尝试在SWF对象上覆盖HTML，但是我遇到了一些问题。Safari 4.0.3PC：渲染apprears很好，但是当在SWF上动画HTML时，div略有闪烁。在SWF之上分层时，div只闪烁。使用常规的背景色不会产生bug。
注意:我以前在Firefox动画div
浏览 2提问于2010-01-08得票数 2
1回答
在iOS safari web上重置方框大小会有什么危害吗？
ios、css、web、safari
因为我使用了这个重置css的代码块： box-sizing: border-box;*, *:before, *:after {}
在滚动或其他重现事件时，我在Safari web检查器中看到:before和:after不断闪烁。如果是这样，我如何仍然为iOS Safari中的所有元素重置框大小。
浏览 2提问于2019-06-13得票数 0
1回答
如何创建具有滚动背景图像的可滚动文本区？
javascript、jquery、css、safari、textarea
我想添加一个背景图像到文本区，随着内容滚动。我是专门为移动Safari编写HTML/JavaScript/CSS的。
我尝试了各种方法，但似乎都不起作用。我试着将文本区放在图像的顶部，然后每当滚动文本区时滚动背景图像。当我输入文本时，它或多或少可以正常工作，但原生滚动条(我不想摆脱它)让它在移动Safari上看起来一团糟。我尝试使用contentEditable div容器，但似
浏览 2提问于2012-08-01得票数 3
回答已采纳
1回答
Safari:可滚动div中的滚动条颜色错误
html、css、safari、scrollbar
我在一个带有可滚动div的网站上工作。该网站有一个黑色的背景，所以我希望滚动条是白色的。但是，Safari将div的滚动条设置为黑色。
<html>
<div class="scrollable"> <&
浏览 3提问于2021-11-11得票数 0
1回答
jScrollPane闪烁问题safari
javascript、jscrollpane、flicker
...click谈“开放的文字记录”var api = null; var pane = $('#transcript');
pane.jScrollPane()api.getContentP
浏览 2提问于2011-05-06得票数 2
1回答
显示:在铬体标签上没有一个不隐藏背景。
html、css、google-chrome
我有一个网站，我设置背景图像和颜色的身体标签通过CSS。我用内联样式display: none;隐藏它，以便optimizely有时间运行并执行任何自定义操作，而不会引起闪烁。直到最近闪烁回来，但我们并没有改变任何似乎相关的东西。我调试它，并看到在Chrome (版本45.0.2454.101 (64位))背景图像和颜色仍然显示，即使身体是display: none;。在firefox、safari和IE11中，没有显示背景。>
浏览 4提问于2015-09-28得票数 3
回答已采纳
1回答
webkit的潜在魔力-背景-可见性
html、css、webkit、flicker
我已经阅读并理解了backface-visibility真正的用途:它控制3D旋转对象在不面向屏幕时是否可见。有一个很好的，简单的演示
有趣的是，在
浏览 1提问于2015-02-14得票数 15
回答已采纳
2回答
无限滚动会导致快速滚动时跳转到屏幕顶部
javascript、angularjs、infinite-scroll、nginfinitescroll
我在我的站点上使用了角指令，它总体上工作得很好。但是，在测试时，我注意到如果我快速滚动，页面会跳回顶部。下面是我的html和滚动函数。我认为问题在于如何处理$scope.busy：<div class="row inner" infinite-scroll="loadImages()" infinite-scroll-distance
浏览 1提问于2015-02-05得票数 1
回答已采纳
17回答
已知“iPad上的Safari”与“桌面Safari”之间的差异列表
ipad、safari、rendering
最近，在Windows/Mac桌面浏览器上测试一个web应用程序--然后在一个iPad上--我注意到Safari中存在着一些我没想到的不同之处。即使版本#是相同的。，例如在iPad上的Safari
当输入元素接收到焦点时，iPad打开屏幕上的键盘，因此内联浮动日历小部件(等等)可能无法按预期工作(iPad Safari不像桌面<e
浏览 11提问于2010-06-09得票数 60
2回答
后台-附件:固定在移动端
android、ios、css、fixed、background-attachment
我正在尝试设置spn web应用程序的背景图像，我需要修复背景(它不会与页面的其余部分一起滚动)。这是正文css： background-color: rgb(51, 102, 102); background-attachment: fixed; color: #eee;IOS中的Safari和Andr
浏览 7提问于2016-12-17得票数 1
3回答
悬停时的CSS3梯度闪烁
html、css、css-transitions
我正在玩一个CSS3梯度，并试图移动它的鼠标。从这个中可以看到，CSS梯度出现在:hover上；但是，它似乎闪烁了几次。到目前为止，这已经在Chrome v30 / Firefox v24 / Safari v5.1上进行了测试。
另外，两者都被证明是可行的解决方案，但结合起来，我得到了闪烁的效果。我还在几个不同的网站上读到，@keyframes还不支持CSS梯度动画。
浏览 8提问于2013-10-27得票数 4
回答已采纳
1回答
设置溢出:隐藏在<body>上会导致iOS Safari上的1 1px白色填充
html、css、ios、safari、background-image
我有一个背景图片的网页是太大，和一般，我想防止滚动在网页上。HTML看起来如下所示 <link href="style.css" rel="stylesheet" /> <body> </div>
<&
浏览 5提问于2022-08-06得票数 0
回答已采纳
6回答
水平滚动表末尾的随机额外空间
html、css、safari
我使用pygments在静态HTML页面上显示CSS样式的代码，但是遇到了一个奇怪的错误，在Safari中错误地呈现了<pre>标记。正如您在这个中看到的，当您在表中向右滚动时，炭背景(设置在<pre>上)在文本停止之前停止，文本的其余部分也不太容易读。将overflow: auto添加到<pre>给了我两个相互独立滚动的滚动条
我已经尽
浏览 8提问于2016-04-05得票数 5
回答已采纳
3回答
搜索框中的IE css对齐问题
html、css
我试图对齐搜索按钮和搜索框，我有工作在谷歌铬，但不是IE或移动Safari/Chrome。我使用的CSS是：
#搜索输入{背景:无重复滚动0 #fff；填充:10 0s；边框:0；颜色：#7F7F7F；字体:20 0s 'Open Sans'，auto；转换:背景0.3s轻松进入-out0；宽度:500 0s；高度:40 0s；边距:0自动显示；显示:内联块；}#搜索按钮{填充:21 0s；背景：(“search.png
浏览 8提问于2015-06-30得票数 0
回答已采纳
1回答
固定位置肚脐slideUp slideDown功能在向下滚动后中断
jquery、html、css、twitter-bootstrap、slideup
我最近实现了一个位置固定肚脐在我的网站，这是通过点击菜单按钮在网站左上角。它在页面顶部运行良好，但在向上或向下滚动后，slideUp / slideDown函数会出现故障。它在Safari和我手机上的Chrome浏览器上工作得很好，但是在Firefox和Chrome桌面上都会出现故障。所有的代码都可以在上找到，但我在下面也包含了最相关的代码。联署材料： var nav = $('#navbar'
浏览 2提问于2014-05-03得票数 0
5回答
卷轴不工作
html、css、scroll、overflow
所以我有这一页，有一个背景图像，占了100 %的页面。问题是，现在我的卷轴无法工作，这会在小屏幕上产生问题，因为用户那时无法查看页面底部的内容。CSS代码：width: 100%;margin: 0;overflow: hidden;position:absolute;width: 100%;padding: 0;pos
浏览 4提问于2013-05-31得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
