Why does Safari treats transform translate different when compared to chrome?

Question

<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>

check this link- https://codepen.io/aby30/pen/mqOMom

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.

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.

What exactly is the difference you don't like? You need to be specific. — Serg Chernata, Nov 08 '17 at 13:13
@SergChernata have edited my question for better understanding. Thanks. — Abhi, Nov 08 '17 at 13:33

score 1 · Accepted Answer · answered Nov 08 '17 at 13:41

1

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.

For example:

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

answered Nov 08 '17 at 13:41

Serg Chernata

12,280
6
32
50

score 0 · Answer 2 · answered Nov 08 '17 at 15:15

This is a common issue with Safari.

To solve this use border-radius ( the same one ) on the .image or img as well.

Then you should use vendor prefix for safari -webkit-transform ; -webkit-translate and so on.

Also you could 'force' graphic/hardware acceleration by using a 3d transform with value 0. This way, you ' trick ' the browser to think that there is a complex 3d animation so it allocates more resources.

see snippet below

a* {
  color: #333;
}

.parentContainer {
  width: 200px;
  text-align: center;
}

.imgContainer {
  background-color: #fff;
  border-radius: 53%;
  width: 130px;
  height: 130px;
  margin: 0px auto 18px;
  overflow: hidden;
}

.itemContainer {
  display: block;
  transition: all 0.3s ease;
}

.image {
  display: block;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -webkit-transform: translate(-30px, 0px) translateZ(0);
  /*       left: -30px; */
  bottom: -10px;
  border-radius: 53%;
  width: 100%;
  height: 100%;
}

.imgContainer:hover > .image {
  /*       left: 0px; */
  -webkit-transform: translate(0px, 0) translateZ(0);
}

<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>

Why does Safari treats transform translate different when compared to chrome?

2 Answers2

Linked