与chrome相比，为什么Safari对待的转换翻译会有所不同?

问题描述

<div class="parentContainer">
  <a href="#" class="itemContainer">
    <div class="imgContainer"><img src="http://via.placeholder.com/180x180" class="image"/></div>
    <div class="title">Title</div>
  </a>
</div>

检查此链接- https://codepen.io/aby30/pen/mqOMom

这是一支钢笔，显示了如何在Chrome和Safari上以不同的方式呈现 transform:translate 和 overflow:hidden (在两个浏览器中打开链接并将鼠标悬停在图像上看到不同).但是，当我采用不同的方法并使用定位(从负数到30px左移)进行移动而不是图像的 transform 转换时，在Safari和其他浏览器中都能获得所需的结果.我无法解决这种异常行为.

Here's a Pen that shows how transform:translate along with overflow:hidden is rendered differently on Chrome and Safari (open the link in both browsers and hover over image to see the difference). But when I take a different approach and use positioning (left negative to 30px) for movement instead of transform of the image I get the desired result in Safari along with other browsers.I'm not able to get my head around this unusual behaviour.

差异:在Safari中，当使用translate属性时，然后在图像悬停时它会向右平移，只有在发生翻译时才会出现全角方形图像.这是不期望的，因为图像的父级(.imgContainer)具有隐藏的溢出属性，因此图像的边缘在任何时候都不应出现.

Difference: In Safari when using translate property, then on hover of the image it translates toward right with full square image appearing only while the translation is happening. This is not expected as the parent(.imgContainer) of the image has overflow property as hidden so the edges of the image should not appear at any time.

推荐答案

这只是一个bug，与所有这种性质的bug一样，此修复似乎就像应用任何3d css 一样简单.闪烁元素的属性.

This is just a bug, and as with all bugs of this nature the fix seems to be as simple as applying any 3d css property to the flickering element.

例如:

.imgContainer {
    -webkit-transform: translateZ(0);
    ...

这篇关于与chrome相比，为什么Safari对待的转换翻译会有所不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！