1

this is a WordPress site using the Avada theme. So, most of the functionality was not coded by me. i am, although, always adding custom CSS to style things.

so if you look at the page, http://new.paramedsupply.com/product-category/blood-collection/, hover over any of those products, and you'll see the slightest little shift as it does the "crossfade" effect, which is showing the other images each product has. Hover over that first band-aid product, you'll see the next pic jump or shift.

i am hoping to find insight to figure how where this is coming from. almost all of my images are 700x700px, so there are almost zero irregularities as far as image sizes.

i use chrome DevTools and was having a hard time using those to find the source code to fix this.

bluedimensional
  • 346
  • 1
  • 3
  • 17
  • Working fine on my Chrome. which version are you working on? may be someone else csn help you out if you add the browser information. ALso does it have same effect in any other browser too ? – Nandita Sharma Jun 24 '18 at 02:55
  • Check this ifit helps you https://stackoverflow.com/questions/12827135/css3-transform-affecting-other-elements-with-chrome-safari – Nandita Sharma Jun 24 '18 at 03:02
  • https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ – Nandita Sharma Jun 24 '18 at 03:02

2 Answers2

1

I see the image shift very slightly during the opacity transition in Chrome for Windows 10.

I was able to fix this locally by adding this rule in Chrome Dev Tools, which forces the transition to be GPU-accelerated:

.product-images .crossfade-images img {
  transform: translateZ(0);
}
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
-1

Try this with Chrome Dev Tool:

  1. force hover on <div class="crossfade-images" style="height: 266px;">
  2. play with opacity: 0 on the second IMG
  3. add transform: translateZ(0) to .product-images .crossfade-images img

Here is your working code:

.product-images .crossfade-images img {
    transition: opacity .5s ease-in-out;
    position: relative;
    z-index: 50;
    min-width: 100%;
    vertical-align: middle;
    transform: translateZ(0);
}

Jon's answer is correct, and he was first. Jon wins!

Good luck!

Bögözi
  • 274
  • 2
  • 17
  • thanks this was helpful as well - you showed my how to use DevTools to find it, maybe in a similar situation in the future. i was, before, thinking of trying to add margin-left or right 1px to find the culprit. you guys' answers were much better - and worked! thanks again! – bluedimensional Jun 24 '18 at 20:56
  • You are very welcome @benjamin7767! I am not sure why my answer has a -1 rating though. – Bögözi Jun 25 '18 at 17:29