Fix Best Practices

[OzarkOutdoor]

My site performance and SEO is excellent. I need help with fixing a specific "Best Practices" error.

 

 Here is the error in text:

Specifying `overflow: visible` on img, video and canvas tags may cause them to produce visual content outside of the element bounds. See https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md.

I have no idea how to fix this because I can't find where to change the 'overflow:visible' code in my site code.

Please help!

[flareAI]

Hello @OzarkOutdoor,

Greetings! I am Gina from the flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.

The error message you are seeing is related to a CSS property called overflow, which specifies how content should be displayed when it exceeds the boundaries of an element. By default, the value of overflow is set to visible, which means that content will be visible even if it extends outside the boundaries of the element.

To fix this error, you need to change the overflow property value for img, video, and canvas elements on your Shopify site. To do this, you can add CSS code to your theme's stylesheet or use a custom CSS section in your Shopify admin.

Here is an example of CSS code that you can use to set the overflow property value for these elements to hidden instead of visible.

img, video, canvas {
overflow: hidden;
}

This will ensure that any visual content produced by these elements will not exceed the boundaries of the element.

Once you have added this code to your site's CSS, you can test your site again to see if the error message has been resolved.

Gina

[OzarkOutdoor]

Thank you for the reply. I have made sure all overflows in my theme are hidden and I still get the error. It has to be somewhere that I'm not seeing.

[Seeker245]

I'm have the same issue, it's something that just started to happen suddenly. A few weeks ago, I didn't have that problem. And I haven't changed anything. 

[oscprofessional]

Hello @OzarkOutdoor 
Can You Please Share Your Store URL I Will check and Provide Proper Solution

[Micmake]

Hello, I am running into the same problem, but I can't seem to find the answer. I've examined my code the best I could but nothing is fixing it. Here is the page url if that helps. https://inspiresculptart.com/products/12-color-metallic-colored-pencils?_fd=0

[Derek_Bradley]

Howde, I'm not a coding expert but I managed to resolve this issue for my theme today. Before you change any code, make a back-up of your theme file.

Download a copy of your theme file and save to a folder on your computer. It downloads as a zipped archive so you'll need to extract that to a folder so that you can search the files. Open the extracted folder and search for overflow: visible - the search will return all the files where overflow: visible; is included; I found 4 files where it was included in my theme code. This helped me to find where exactly the code was present in my whole theme file directory. Going through each of the files where overflow: visible; is present, delete it and then re-run your Pagespeed Insights test to see if the issue is sorted. If it isn't, then restore the code snippet in the file and move to the next file where it was found.

In my case, the code that was causing the error was in section-main-product.css - deleted it from there and my best practices score went from 77% to 100%. I checked my site on both mobile and desktop and everything looks fine. I can always go back and re-add the code if I later find it has caused some undesirable issue elsewhere.

Hope this helps.