I’m designing my website with the title of each section having a sticky scroll effect so that the text of each section scrolls above its title. However, the layers are not rendering in the correct order. Some of them render correctly sometimes and some of them render incorrectly most of the time, and there seems to be no rhyme or reason to what’s going on. When I publish the site, I can reload the page and have everything in the correct order then reload again and have everything ruined again.
This is the correct order:
Sometimes the title renders above the text:
Sometimes the title renders below the text but above the container (there’s a container that’s the same colour as the background so that the text covers the title when it scrolls over the title):
I should note that the text is inside the container, so the fact that the title is rendering above one but not the other is even more confusing.
At first I thought maybe the images are too large and are taking too long to render properly, but I tried significantly reducing the file size of the images and their physical size on the screen, but that made no difference.