在chrome和firefox中滚动带有溢出y和图像的div会使图像失真，但不会在safari中显示
问题分析
在Chrome和Firefox浏览器中滚动带有溢出（overflow-y）和图像（img）的div时，图像可能会出现失真的情况，而在Safari中则不会显示这个问题。这通常是由于浏览器渲染引擎的差异导致的。
基础概念
- CSS Overflow:
overflow-y属性用于控制元素在垂直方向上的溢出内容如何显示。常见的值有visible、hidden、scroll和auto。 - 图像渲染: 不同浏览器对图像的渲染方式可能有所不同，尤其是在处理滚动和动画时。
- 硬件加速: 现代浏览器使用硬件加速来提高图形渲染性能，但这也可能导致一些渲染问题。
可能的原因
- 渲染引擎差异: Chrome和Firefox使用不同的渲染引擎（Blink和Gecko），而Safari使用WebKit。这些引擎在处理图像和滚动时可能有不同的实现细节。
- 硬件加速问题: 某些情况下，硬件加速可能导致图像渲染问题，特别是在滚动时。
- 图像尺寸和缩放: 如果图像的尺寸或缩放方式不正确，也可能导致失真。
解决方法
1. 禁用硬件加速
尝试禁用硬件加速，看看是否能解决问题。可以通过CSS属性来实现：
.your-div {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}2. 使用will-change属性
will-change属性可以提前通知浏览器某个元素将要发生变化，从而优化渲染性能：
.your-div {
will-change: transform;
}3. 确保图像尺寸正确
确保图像的尺寸和缩放方式正确，避免在滚动时出现失真：
.your-div img {
width: 100%;
height: auto;
}4. 使用object-fit属性
object-fit属性可以控制图像在其容器中的填充方式：
.your-div img {
width: 100%;
height: 100%;
object-fit: cover;
}示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Div with Images</title>
<style>
.your-div {
width: 300px;
height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.your-div img {
width: 100%;
height: auto;
object-fit: cover;
}
</style>
</head>
<body>
<div class="your-div">
<img src="path/to/your/image.jpg" alt="Example Image">
<!-- Add more content here -->
</div>
</body>
</html>参考链接
通过以上方法，可以尝试解决在Chrome和Firefox中滚动带有溢出和图像的div时图像失真的问题。
相关·内容
我有一个很长的图像，我想要显示在一个带有滚动条的容器中。也许我做的不对，但目前我有一个容器(work-sample)，里面有一个项目容器，里面有图像。它在safari中显示得很好，但由于某种原因，在macs上用chrome和safari查看时，长图像都被压缩在一起了。 co
浏览 27提问于2021-08-16得票数 0
回答已采纳
我正在尝试使用flexbox在我的内容流中并排放置两张图片。在Chrome/Safari中，它可以正确缩放图像，但在Firefox/IE中，纵横比不受重视，图像会失真。内容流的整体宽度取决于浏览器的宽度。因此，当窗口变窄时，需要重新调整图像。这是它在Chrome/Safar
浏览 0提问于2015-04-10得票数 4
目前有以下带有svg扩展的图像源的代码，在Chrome和Firefox中运行良好，图像不会出现在Safari中，即使添加了"onerror“：<li&
浏览 0提问于2014-03-19得票数 0
我正在处理一个非常简单的动画:向左滑动一条图像线： function() { }(它应该是一个图片库；我隐藏溢出，一次只显示一个图像。)无论如何，尽管尝试了各种宽松的参数，，即使在慢速的
浏览 0提问于2011-12-17得票数 14
回答已采纳
我目前正在为移动客户端开发一个固定的导航菜单。我注意到，在Firefox中，当你在div上设置overflow-y: auto和一个最大高度时，它会在Chrome和Safari中显示整个div，但在Firefox中，底部内容永远不会显示出来。我已经创建了一个代码笔来显
浏览 0提问于2015-07-13得票数 0
3回答
悬停图像效应问题
、、
我成功地在我的css中添加了以下图像悬停效果。我知道这适用于我网站上的所有图片。事实上，它是:-)然而，一些图像，当悬停在他们的位置/位置之外。在某个地方，我读到，我必须把我的图像包括在一个div。但是，我如何才能用我所有的图像来实现这一点，我应该把代码放在哪里呢？我的站点在Joomla3.3中，我试图将div
浏览 2提问于2015-01-09得票数 0
回答已采纳
我遇到了一个奇怪的问题，不知道如何解决。参见示例：
问题是:当带有背景图像的第3div到达视频时，“固定”的背景图像突然跳起来
浏览 3提问于2012-07-22得票数 2
images div中的图像在Chrome、Firefox中似乎垂直对齐并正确居中，而在Safari中则不然。在Safari中，图片被推入到images div的下方/出，并显示在div下面，如下面所示，流到description div中：
下
浏览 1提问于2015-06-14得票数 0
回答已采纳
您好，我在包含图像和文本的div上使用jQuery淡入/淡出。它在Firefox、Chrome和Safari上运行良好，但在任何in浏览器上似乎都不起作用。图像会在我指定的毫秒数淡出时消失，但不会淡出。
在资源管理器中使用它有什么特殊的规则吗？
浏览 0提问于2010-03-18得票数 2
<div class=" backgroundimage"> </div> background: linear-gradient(rgba(191,0,0,1),rgba(191,0,0,1)),url(image) no-repeat center center;
background-position-y: 250px !从一些研究中，我发现为了在图像上添加颜色覆盖，就是<
浏览 0提问于2018-06-14得票数 1
我使用Chrome和安卓手机，只在好友iPhone上查看我的网站。在我的主页上没有标志在标题，和视差图像在主页上没有加载。那里看起来有正确的@2x图像。网站也使用WebP图像，但据我所知，如果设备不能显示WebP，图像格式将默认为jpg/png。
任何建议都会感激地收到，因为我不再有一个iPhone检查：
浏览 0提问于2017-10-07得票数 -1
回答已采纳
我正在使用一个png图像作为背景为一个单一的网页网站。我希望当我向下滚动时，png的背景与页面的背景相匹配，以便它看起来是连续的。我已经将background-color值设置为#EC966A。在我的mac电脑上，它在Firefox和Chrome中显示正确，而在Safari上却没有显示。Firefox和
浏览 1提问于2016-03-05得票数 1
回答已采纳
1回答
我之前设计的网站有一个漂亮的图片库，里面有缩略图和弹出式图片。她更喜欢换一种不同的格式，类似于她在代理网站上的格式。这是该网站上的画廊：
我设置了图库，以便从文件夹中提取图像，这是可行的。画廊被放置在一个100%宽的Div容器中，这样它就可以伸展
浏览 1提问于2013-12-12得票数 2
回答已采纳
我试图使用img标签加载我的svg文件，但它在firefox上不起作用。Chrome显示svg。我试着像这样做，。ubuntu.digitalfront.ca/ghcorp/wp-content/uploads/2014/09/hillsdale.svg" alt="" class="img-responsive" />svg在F
浏览 5提问于2014-09-19得票数 10
0回答
我创建了一个带有宽度为160px的图片的网站。为了避免失真，我不设置高度(或者添加height:auto;)。现在应该自动设置图像高度(当图像为16/9时为90px)。但当我用Chrome打开它时，图像高度被设置为原始图像高度(1080px)，而它的宽度仍然是160px，因此它非常扭曲
你知道为什么它不能和chrome一起工作吗？(既不是在移动设备上，也
浏览 16提问于2017-11-21得票数 6
回答已采纳
3回答
我在让Chrome使用子元素的边框半径时遇到了一点麻烦。下面是设置： <img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg它也不一定是一个图像。填充背景的任何内容。
这是一个展示问题的
浏览 0提问于2012-09-20得票数 7
回答已采纳
我完全不能清楚地描述我的问题，所以我试着在这里做一个尽可能简单的jsfiddle：。在Chrome+IE上，我的图片在#div3下，而在火狐上，我的图片在#div3下。这一切为什么要发生？<div id="div1"> <div id=&q
浏览 0提问于2013-06-28得票数 0
回答已采纳
1回答
在此应用程序中，图像应显示在悬停状态。我已经查看了Safari和Chrome上的网站。原来，图片在Safari上显示得很好，但在Chrome上看起来失真了。我猜想是Chrome导致了这个问题，但我不明白为什么。问题1:真的是因为Chrome吗？问题2:如何解决这个问题？
另一个用于类似目的的图像在悬停时工作。它
浏览 2提问于2016-01-31得票数 0
请参阅此中页面的冻结DOM状态。
代码应该表示一个带有四个选项卡的模式，其中第三个选项卡内容是打开的。应该像下面的图片(在最新的Chrome中呈现)：三个div并排显示，其中包含溢出的内容，div是可滚动的。在底部有一个div，包含绘图方法、文本和一个按钮。同样的</
浏览 1提问于2017-04-19得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
