0

I have a gallery of images with the ratio forced (like this) and for some reason the images flicker when you scale them with transform. I have tried both "-webkit-transform-style: preserve-3d" and "-webkit-backface-visibility: hidden" but it didnt fix it. It seems that it only happens in chrome.

Live version with one image where you can see that the lines of the bricks flicker(chrome): https://codepen.io/Nanetten/pen/boRQVE

<div class="grid-item grid-item--width6">
  <div class="item">
    <div class="outer half">
      <div class="inner"><img src="https://image.ibb.co/fOAxqb/1.jpg" alt="test"></div>
    </div>
  </div>


* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.item {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  -webkit-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}
.item .outer {
  position: relative;
  height: 0;
}
.item .inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.item img {
  width: 100%;
  height: 100%;
  transition: all .5s ease-out;
  display: block;
}
.item img:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}

.half {
  padding-top: calc(50%);
}


.grid-item {
  float: left;
  display: block;
  margin: 5px;
}

.grid-item--width6 {
  width: calc(50% - 10px);
}

Thanks for your help.

M. GR.
  • 21
  • 3
  • I don't see the flickering. Could you record a gif and post it? I use [Cloud App](https://www.getcloudapp.com/apps). – Jason Sep 30 '17 at 02:32
  • I think its because I changed the transition time, it should flicker now https://codepen.io/Nanetten/pen/boRQVE GIF: https://imgur.com/a/eUwl0 – M. GR. Sep 30 '17 at 03:31
  • I did some googling using this phrase, `transform: scale blurry lines`, and tried several things on your codepen but it didn't make a difference. It seems to be worst on Chrome, better on Firefox, and almost good on Safari, using the latest versions of each, fwiw. – Jason Sep 30 '17 at 13:17

2 Answers2

0

I had same issue and ended up doing something like this

image {
 object-fit: fill;
 transition: transform 0.3s ease;
 transform-origin: center;
 transform: scale(1.01); //add this line to get over the flicker effect
   &:hover {
      transform: scale(1.14);
   }
}
Sukhwinder Singh
  • 1
  • 2
-1

I found a "fix", I replaced the img with background-image in the .inner div. It still has a bit of flickering but its not noticeable. Why this only happens in Chrome I still have no idea.

Live version with fix for chrome: https://codepen.io/Nanetten/pen/boRQVE [uncomment the img in html to see the differences]

.inner {
  background-image: url(https://image.ibb.co/fOAxqb/1.jpg);
  background-size:cover;
  transition: all 1s;
}
.inner:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}
M. GR.
  • 21
  • 3