How can I fix the 'overflow: visible' error in my site code?

[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. 

[ChristopherVigh]

Hi FlareAI,

I am having the same issue, but I have no overflow: visible on my site, i have no all: inherit and I have tried to add overflow: clip to the img, video, canvas to my base css. None of it works.

Have been following google's blog post:
https://developer.chrome.com/blog/overflow-replaced-elements

I have fixed it once before, where it went away no problem, but then it came back a week or two ago.
Do you think it could be a google lighthouse error?

[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.

[kaunainkaisar]

Here is a solution for your issue which is being faced by almost every one in DAWN Theme
Go to:
Online Store > Themes > Edit Code > Section-Main-Product.css
Then Press Ctrl + F, Search  overflow: visible
You will find this like this :

  .product-media-modal__dialog .global-media-settings--no-shadow {
    overflow: Visible !important;

 Simply change it to overflow: auto like this:

  .product-media-modal__dialog .global-media-settings--no-shadow {
    overflow: auto !important;

Save changes and you are good to go... 

[DBond]

I just recently had this error come up but I can't seem to find any overflow code? can you help?