Productos Template - when scrolling sticky section goes on top of the following section instead of going below

Design help General
1

Hello everyone,

I bought one of Webflow’s templates (from Productos Productos - Food HTML5 Responsive Website Template).

When I open the product page of the ecommerce from my phone (safari & chrome) I see the same problem: when scrolling, the first section which is position sticky goes on top of the following section. I have tried to fix the z-index of the sections but it’s not solving the problem.

This is the live website (product page with error, please open it from your mobile and scroll slowly): Torlolio di Oliva | Fattoria dell'Uccellina

this is my read-only link: https://preview.webflow.com/preview/fattoria-delluccellina?utm_medium=preview_link&utm_source=designer&utm_content=fattoria-delluccellina&preview=5e5c0a09cd0b1f7b78c170bb59591613&pageId=5fb5363cb08bd9351c1ce74a&itemId=5fb5363cb08bd960651ce7eb&mode=preview

Please find attached a screenshot of the error.

Thank you very much in advance for your help :slight_smile:

Ginevra

WhatsApp Image 2020-11-23 at 20.24.46
WhatsApp Image 2020-11-23 at 20.24.46739×1600 116 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I HAVE FOUND THE SOLUTION!

Apparently it’s a problem with Safari & z-index. Just add this custom code to the page settings, replacing “div” with the name of the classes which specify a z-index value:

div {
-webkit-transform: translate3d(0,0,0) !important;
}