Docs

[Mark M]

HI,

I am just finishing off a site I have been constructing for a fabric wholesaler and I have noticed a problem. When you go to the product listing within woocommerce the thumbnails display like the image below. You will notice that there appears to be a small white line running down the right hand side of the thumbnails on the 2nd, 3rd and 4th columns.

How can I correct this?

Kind regards,

Mark

[Mark M]

This reply has been marked as private.

[Rue Nel]

Hello Mark,

Thanks for writing in! To assist you with this issue, could your please provide us the URL of the page and the browser that you are using? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[Mark M]

Hi,

I am using Safari as my browser and it is appearing on all product thumbnail pages. It also seems to jump around a bit, some pages show it on different columns. Currently I have just logged in and tried again and am now just seeing it on column 2.

I have tried it with chrome and I don’t see this, so I am guessing it is browser specific.

Regards,

Mark

[Rue Nel]

Hello Mark,

Please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css (if you are using a child theme)

.woocommerce li.product .entry-featured img, 
.woocommerce-page li.product .entry-featured img {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

We would loved to know if this has work for you. Thank you.

[Mark M]

That didn’t seem to make any difference. I restarted safari and cleared the cache just in case.

[Rue Nel]

Hi Mark,

Please try this code:

.woocommerce li.product .entry-featured img, 
.woocommerce-page li.product .entry-featured img {
  -webkit-backface-visibility: hidden;
  transition: none;
  -webkit-transition: none;
}

Have you notice that as soon as you resize your browser, the white line disappears or it will appear in another image? As this is not happening in Chrome and Firefox, this must be browser specific issue which we do not have any control.

Please let us know your thoughts on this.

[Mark M]

When I resize the window smaller the white lines move about but if I then resize to site size the lines disappear altogether.

Yes they don’t appear in chrome or firefox, only safari. I will report it to apple as a bug. Thanks for your help.

Kind regards,

Mark

[Thai]

You’re most welcome 🙂

If you need anything else, please let us know.

[Author]

Posts