0

So I've done a lot of researching regarding this problem especially going through and trying all of the stuff in this thread:

https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome#=

However, filter:blur(0); transform:translateZ(0) only work on laptop screens and not normal IPS flat screens. You still see the shifting and blurring of text. Does anyone have a solution that works for both laptop, normal monitors and across browser ? Below is an example of what happens on normal monitors, notice the shifting of the icons vertically. Below that is the code we're using.

issue happening on a normal monitor screen

.article-catalogue {
  transition: transform .3s ease, box-shadow .3s ease,border .3s ease;
  filter: blur(0);
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}

.article-catalogue:hover {
  transform: perspective(1px) translateZ(0) scale(1.02);
  box-shadow: 0px 12px 40px -10px rgba(51,51,51,.2);
}

One thought, could it be the rollover elements within the card causing the problem ?

Timmy Lee
  • 785
  • 1
  • 11
  • 25
  • You are changing perspective on hover. That might be the reason for movement. – Mohit Bhardwaj Oct 20 '17 at 14:16
  • ya.. even without perspective it does it. i tried all the different permutations and it constantly fails on normal monitors. laptop, especially mac screens it works fine :( – Timmy Lee Oct 20 '17 at 14:42

0 Answers0