Element hides text although it is several levels lower

The red logo (a red) at my homepage releases a grey logo (a grey) when scrolling. You can test this at “semiserif.de”.
In some cases (Safari on desktop, Firefox on tablet) the grey logo is above the text, although the layers are arranged correctly.

If you enlarge or reduce the browser window sideways, the grey »a« slides behind the text again. The same happens when you turn the tablet 90 degrees.
I am at a loss.

Thanks for help, Alex (kieselgurkid)

Hi @kieselgurkid, welcome.

We have found several iPad specific Safari bugs, so maybe that’s also one of them. It would be best if you could send us the project file (wetransfer.com to feedback@sparkleapp.com) and we’ll take a look.

Maybe that this is only a browser cache problem?
Everything is good looking and seems to be OK here – Safari 15.6.1 on a Macbook M1 with macOS Monterey 12.6. Greetings from Switzerland, Gerd

Maybe you have already found a solution to it @kieselgurkid? On my iPad (portrait and landscape) all text is in front of your logo.

Remember your launched Sparkle website is responsive fixed-width so it steps down into the devices (aka responsive breakpoints) and will be served up depending what device views it.

Using your browser and changing the width will show possible issues in between device change over, but will not be the case when viewing it in the device…

Dear all,
Thank you for your quick answers. I think I have fixed the error meanwhile: I placed an empty box above the text box and fixed it by making these two a group. So that, metaphorically speaking, the text box can no longer slide upwards under one of the logos when scrolling.

@ Duncan: what might be interesting for you: the error only occurred when I edited the file I created in 2020 in the current version of Sparkle. Before that, everything worked fine. So f.y.i. I’ll send you my project file via wetransfer although the problem seems to be fixed.

Greetings, Alex