Screen appears blank while scrolling

Hi Juned,

It seems that your Sticky Woocommerce Panel is the one covering the screen.

You have CSS making it take up the entire screen.

Specifically, these code: https://share.getcloudapp.com/DOu4D498

See: https://share.getcloudapp.com/6quZ8ZQB

Currently, it’s coming from Perfermatters plugin. Can you try disabling it temporarily so we can check where this CSS is coming from?

Hope to hear from you soon. :)

Hey Fernando,

Thanks.

Perfermatters plugin is disable now. Kindly suggest me further.

I can still see Perfermatters, and the CSS is still coming from there.

Can you clear any caching mechanism set in your website? Plugins, Server and Cloudflare cache included.

Alternatively, you can try looking for the code shown above in Appearance > Customize > Additional CSS or try #1 here if it’s not there: https://docs.generatepress.com/article/debugging-tips/

I found and removed this css from Appearance > Customize > Simple CSS:

#wc-sticky-cart-panel button {
font-size: 15px;
padding: 2px;
flex: 0 0 100px;
}

I have also disbaled: "Display add to cart panel on scroll".

The problem is solved by disabling this feature and remains same when enabling it.

Kindly suggest what should I do?

Now:

* Perfmatters is disabled
* All caching cleared including CF
* Disbaled: “Display add to cart panel on scroll"

Please suggest.

I’m not seeing the Sticky Woocommerce Panel anymore. Nothing is obscuring the content of your site now.

Are you still seeing it? If so, try clearing your browser’s cache.

Moreover, may we know specifically how would you like to go about this? Would you like to return the Sticky Woocommerce Panel?

Kindly let us know.

Yes, I want to keep this feature live: Display add to cart panel on scroll.

The problem is not visible right now because the feature is disabled. It will appear again after enabling it.

Please help.

Can you enable “Display add to cart panel on scroll” once more? Keep Perfmatters disabled temporarily.

Done.

Seems like the issue is coming from Perfmatters.

The issue doesn’t exist with it disabled: https://share.getcloudapp.com/4guK2rn7

I also don’t see the CSS previously mentioned that was causing the issue.

Can you kindly check your settings in Perfmatters? Try checking for settings that may affect the CSS in your website.

Hope this clarifies. :)

Thanks Fernando for your kind support.

You’re welcome Juned! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)

I had a similar issue, and found clues on how to fix it thanks to this topic. In my case, it was caused by wp-optimize merging CSS files together. I fixed the issue by disabling the CSS merging, so I'm leaving this here for those in the future with the same issue.

Thanks for sharing Erik-Jan!