background attachment fixed for ios

08 Feb 2025

apparently background-attachment: fixed does not work on ios and ipados safari. which, me being long out of practice with html and css this decade, was a bit of work to figure out. but really, turns out this wasn’t a bug, instead, it was a deliberate choice by mobile browsers. apparently, it was too resource intense with how much repainting was required. so, ironically, instead of just letting people use it and suffer the consequences, you can achieve effectively the same thing in several different ways.

the way i chose was to use a psuedo-element. basically, create a div with the background image set to what i want to use, then have its position fixed, and bada-bing bada-boom, bob’s your uncle.

this is what i currently have for my body element to make this work.

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: -1;
  background: url("/images/IMG_0284.jpeg") no-repeat center center;
  background-size: cover;
}

and apparently, that’s it.