Skip to content

Instantly share code, notes, and snippets.

@kentbrew

kentbrew/glassy.md

Created May 24, 2026 08:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kentbrew/74bd4319034aa4c025039f48488a7a89 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kentbrew/74bd4319034aa4c025039f48488a7a89 to your computer and use it in GitHub Desktop.
Download ZIP
Prevent Safari on IOS 26+ from throwing up random blurry colors under the bottom toolbar
Raw
glassy.md

Prevent Safari on IOS 26+ from throwing up random blurry colors under the bottom toolbar

Just shipped a site with a whole rainbow of sticky headers that scroll up and down the full width of the page; as they flew by the bottom toolbar would shift through colors not corresponding to the top sticky header and it was annoying.

No good docs or StackOverflow answers that I could see so here's a quick note to Future Me for when I forget how to do this. At the very bottom of your page, add this:

<div class="glassy" style="position:fixed;left:0;bottom:0;right:0;height:5px;z-index:8675309"></div>

My device and simulators seem to be sampling four to five pixels above the bottom edge; a 5px stripe has worked for me so far.

Feel free to break out the styling into your CSS. Also feel free to substitute the z-index of your choice; just be sure it's higher than anything that might scroll past, or you'll see that element's background color sampled.

I have no idea why this works; maybe it's sampling the div and the main color it finds is transparent?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment