Why Does Safari Treats Transform Translate Different When Compared To Chrome?

Solution 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);
    ...

Solution 2:

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>

Share