▼
Streaming live at 10am (PST)

Hero image appears in-between text as you scroll on mobile view

Design help General
#1

HI guys,

Happy new year to all. I hope everyone is safe and well. I have an issue where my hero image appears in between text as you scroll down on mobile and sometimes on desktop too… especially when u scroll fast. after you go back and forth it disappears… any ideas? what am I doing wrong?

Many thanks,
Stelios

Here is my site Read-Only: Webflow - Kensho

#2

Hi @Stelios_Kyriakides,
welcome to the forum. May you share some screenshots with us. Your live site is password protected. :smiley:

Maxi

#3

Hi @MXI THanks a lot for your prompt reply. I hope you are well
The password for the website is: Bestdesign2021

Thanking you in advance,
Stelios K

#4

Thanks @Stelios_Kyriakides,
i have never seen this problem, and i also didn´t find anything on the internet, but i have 3 ideas to try.
1: try wrapping a div around all elements under your main sticky hero slider. give this class also your background color.
2: Webflow interactions. Hide the hero if it is not in view. (little bit complicated)
3: add 2 divs as shown here

image
image1845×914 204 KB

image
image1875×920 217 KB

the background color of the 2nd div should be your grey not my red.
And alle your overlaying elements MUST have a z-index of at least 3. Otherwise the mask will display over the content, and so the content will dissappear.

Hope someting works
Maxi

ps. i searched for “sticky content shows through div” and “sticky content flashes through overlaying content” maybe you can find something out there. :smiley:

#5

Hi @MXI,

Thanks a lot for the above, unfortunately none of the work im not sure why.
@Drew_Schafer any suggestions?

Many thanks,

#6

Hi @Stelios_Kyriakides,
it seems to be a weird bug, there must be a easy fix to this. Hope you find sth.
Maxi

#7

Thanks a lot for helping out.
@vincent any suggestions on the issue above? we were hopping to launch the website today :frowning:

Many thanks,

#8

I have another workaround idea @Stelios_Kyriakides.
You could unset the hero section from sticky to relative or normal. This of course, no longer has the actual sticky effect, but it would be a solution until there is a bugfix. Thereby you could launch today.
Maxi

#9

Hi @MXI,

I have managed to fix the issue by adding a 10% opacity animation whilst scrolling.

Again thanks a lot for your suggestions!