如何修复具有overflow: hidden的元素上的safari亚像素bug？
修复具有overflow: hidden的元素上的Safari亚像素bug可以通过以下方法：
- 使用transform属性：将具有overflow: hidden的元素添加transform: translateZ(0)样式。这会触发GPU加速，修复Safari浏览器上的亚像素bug。
- 使用backface-visibility属性：将具有overflow: hidden的元素添加backface-visibility: hidden样式。这会创建一个3D环境，强制浏览器使用GPU渲染元素，从而修复亚像素bug。
- 使用position: relative属性：将具有overflow: hidden的元素添加position: relative样式，并在元素内部添加一个position: absolute的子元素。然后，将子元素的宽度和高度设置为100%。这样可以触发元素的重绘，修复Safari浏览器上的亚像素bug。
- 使用伪元素：在具有overflow: hidden的元素上添加一个伪元素，并将其position属性设置为absolute。然后，将伪元素的宽度和高度设置为100%。这样可以触发元素的重绘，修复Safari浏览器上的亚像素bug。
需要注意的是，以上方法仅适用于修复Safari浏览器上的亚像素bug，对其他浏览器可能没有效果。另外，具体的修复方法可能因具体情况而异，需要根据实际情况进行调试和优化。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
相关·内容
我正在尝试创建一个标签在左上角的盒子。此标签必须在鼠标悬停时滑动。当我在Safari浏览器(Mac Capitan)中将鼠标悬停在这个框上时，我看到了以下错误：注意！我发现当视口宽度为奇数时，就会发生这种情况。(您可以一步一步地调整浏览器的大小以查看此问题)。.box { overflow: hidden; margin-left: -100px;
width: 2
浏览 0提问于2016-12-29得票数 1
通常，在主体上设置overflow-x: hidden应该意味着整个页面不会滚动。但是在MacOS Safari和iOS webkit (Safari、Chrome等)中，如果嵌套的柔性盒元素溢出身体，overflow-x: hidden就不受尊重。在Safari或iOS webkit中打开，并滚动.
width: 100vw;
overflow-x: hidden
浏览 2提问于2019-01-24得票数 1
1回答
在Safari 10.1.2上偶然发现了一个可视化bug (有些版本只是某种原因)。你能帮我找到一条通往我想要实现的目标的途径或解决办法吗？它可以在所有其他测试的浏览器和以前版本的Safari上工作。
正skewY (大于transform: skewY(0deg);)被应用于一个元素。此元素具有属性overflow:
浏览 4提问于2017-09-19得票数 0
我有一个带有谷歌地图的页面和一个由我制作的滑块，它使用一个简单的水平动画。编辑它可能与“重画”之类的东西有关，因为我注意到调整窗口大小会使幻灯片就位。
浏览 0提问于2011-09-27得票数 1
回答已采纳
我在一个用angularJs制作的离子卷轴元素中有两个表： <ion-scroll class="has-header has-footer" scrollbar-y="</table> </ion-scroll>这两个表都很长，所以我需要两个表的溢出滚动在Ch
浏览 3提问于2016-01-26得票数 3
我有一个问题，我的css3转换会影响页面上的其他元素，甚至导致它们闪烁。我看到了另一篇关于这个问题的帖子，但他们没有解决这个问题的办法。
当您滚动导航时，您会看到一个动画的css3转换。它在firefox中运行良好，没有闪烁，但在chrome和safari中效果非常明显，你可以在下拉菜单项和页脚文本中看到它。
浏览 1提问于2012-10-11得票数 13
回答已采纳
4回答
我已经做了一些测试，从我所看到的，在ios6上的移动Safari中有一个bug。在body标记上添加overflow:hidden并使用transform:translateX(100%);将元素移出正文时，它会为该元素创建额外的可滚动空间。在所有的桌面浏览器上，它都是“隐藏的”。有
浏览 0提问于2012-09-15得票数 14
回答已采纳
2回答
我在为iOS设备编写的iOS应用程序上遇到了问题。它只在iOS 3.x中表现出来。下面是我遇到的问题：计算样式为：-webkit-background-clip: padding-box;text-shadow: white 0px 1px 0px;width: 378px;这是表行中<e
浏览 5提问于2010-12-20得票数 1
好的，我正在Safari中测试这个，我确信在其他浏览器中也是一样的，但是我还没有检查(还没有)！这一段脚本工作得很好，而且一点也不刺耳，也没有什么问题：$(window).scroll(function() {
$(this$('body').css('overflow-x', 'hidden
浏览 1提问于2012-09-19得票数 0
回答已采纳
10回答
我们将body和scrollable元素上的overflow-x值都设置为隐藏，但是mobile Safari会忽略这些值。在桌面上，溢出值工作正常。相关代码：
body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient:hidden; overflow-y:auto;
浏览 0提问于2013-07-21得票数 9
回答已采纳
我正在尝试编写一个样式表，该样式表设置以下html的样式 body > * { display: inline-block; overflow: hidden;}
margin: 0 auto;} <html><body>
<span><h
浏览 41提问于2020-08-22得票数 0
回答已采纳
当应用到SVG元素时，我遇到了让指针事件CSS正常工作的问题。在使用iPad时，它的行为与预期不符。我在这里创建了这个问题的一个小演示：
如果任何人在此之前遇到过或对此有任何见解，我非常感谢您的帮助！
浏览 3提问于2012-03-02得票数 3
我只在Safari (6.1 os x)中看到了这个问题<div class="wrapper">
浏览 0提问于2014-11-03得票数 30
我使用了一个HTML5视频元素作为背景层，它工作得很好，但是它会导致页面上的其他元素出现问题，这些元素有一个带有background-attachment: fixed属性的背景图像。如果我将视频包装器div的z索引更改为正的值，问题就会消失，但这就违背了将其用作背景层的目的。此问题仅在webkit浏览器(Chrome和Safari)中出现。video-background {
浏览 0提问于2013-10-09得票数 9
至少在Google中似乎有一个bug (而不是FF中的bug)，当在元素之外发生单击时，会激活网格中的contenteditable元素。<div style="width: 300px; margin: 0 aut
浏览 3提问于2022-06-18得票数 0
回答已采纳
在Chrome DevTools中，在呈现下，有一个选项可以“显示潜在的滚动瓶颈”。当我启用这个功能时，我在屏幕上的一些带有div的overflow:scroll元素在顶部显示了一个标志，上面写着“在滚动页上重新绘制”。我找不到很多关于这个特性的文档，我也不知道它是否是我可以修复或改进的东西，或者仅仅是一个事实声明--div有内容，而且它们确实滚动。
浏览 0提问于2014-07-14得票数 55
回答已采纳
我想要自动滚动一个特定的元素，无论是鼠标悬停还是使用图像映射。我还想隐藏该div的滚动条。问题是。代码在jsfiddle.net上，除非我违反了一个不成文的规则，请让我知道，我只会发布链接。求求你求求你！请解释您的解决方案。非常感谢!
我决定添加代码，因为我之前在添加代码时得到了立即
浏览 5提问于2011-09-17得票数 0
回答已采纳
我发现了一个与定位相关的奇怪的Safari行为。例如： position:fixed; height:30px;#toolTip-child {在Safari中，如果父元素是fixed定位和<e
浏览 1提问于2014-01-27得票数 7
2回答
由于某些原因，当文本从屏幕上切换时，我无法将它隐藏起来。例如，我有一个矩形隐藏在屏幕之外，但即使在页面结束后(页面的两侧)，矩形仍然是可见的，这是非常奇怪的。我以前解决过这个问题，但我忘了。1000px;}
width: 600px;}
float: left;padding-left: 45px;f
浏览 3提问于2015-03-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
