Weird CSS display bug!

This may just be a placeholder. I’m trying to backfill some content that I did not have the time to write in the last quarter of 2024.

Backdrop-filter behavior

This was weird. We had an issue where the collection pages had most of the content fully occluded but it was unclear why. The parent section used a backdrop-filter to blur and darken the content behind it, which helped the page display a bit better, responsively.

This was only an issue on iOS devices, and I could not replicate it in my browser at any viewport size.

What I ended up doing was setting up iPhone mirroring on my desktop, then using Safari and having it display as if it were my iPhone device. This allowed me to reproduce the behavior on my desktop.

Then I used the browser developer tools to inspect each individual node, and tinkered with them at each point. There was no obvious behavior.

Finally, I narrowed it down to the heading image for the section content – if I removed the heading tag entirely, it displayed correctly.

Then I realized I could also coerce correct behavior by removing the background image of the heading tag (it was using that old hack – show a background image, and then negative-text-indent the heading text off of the screen). Apparently, when an element uses backdrop-filter, if a child element also has a background image set, all of the content gets rendered behind the backdrop-filter rendering layer.

The fix was, for now, to remove all the background-images from the heading tags and just display the text normally.

Later, I will re-add the heading images but as a normal image, and hopefully that displays OK.