/* THE GROUND EVERY PAGE STANDS ON — the background photograph, the wash over it, the cutting mat pinned to the window, and the phone's notch and coarse-pointer rules. Lifted out of five pages on 2026-11-07 (D8), where it was copied word for word: the works page's own comment already said all four pages of a show 'must agree to the pixel', and nothing enforced it. Now one file does. It was verified identical in all five before the move, and it is linked FIRST on every page because these were the first four rules in every page's own block. Taken from works, whose comments are the general ones. */ /* The same ground as every other page of this show: the background, the wash over it, the phone's own mat and the notch. Copied from the installation page rather than rewritten — all four pages must agree to the pixel. */ html { background: url('/images/background-desktop-v2.jpg') no-repeat center center fixed; background-size: cover; /* `width: 100%`, NOT `100vw`: 100vw counts the scrollbar. See the press release page, which carries the full note. */ margin: 0; padding: 0; width: 100%; height: 100%; /* THE MAT IS PINNED TO THE WINDOW, NOT TO THE CONTENT AREA (standing rule 27). The same `cover`, written out in vw/vh so it ignores the scrollbar too — the press release page holds the explanation and the measurements. */ background-size: max(100vw, 100vh * 3068 / 2031) max(100vh, 100vw * 2031 / 3068); background-position: calc((100vw - max(100vw, 100vh * 3068 / 2031)) / 2) calc((100vh - max(100vh, 100vw * 2031 / 3068)) / 2); } @media (pointer: coarse) { /* AN iPAD IS A TOUCH DEVICE TOO, AND THAT IS THE WHOLE OF THIS BUG. B20 established on 2026-10-29 that iOS will not hold a fixed background still: Safari sizes a `fixed` BACKGROUND against the whole scrolling page rather than against the window, so the mat drifts as you scroll, repeats once the page runs longer than a screen, and leaves white down the sides. The cure it found — a fixed ELEMENT, which is reliably the window — was written into the phone branch below, and the phone branch starts at `max-width: 800px`. An iPad held upright is 820px on an Air and 1024px on a 12.9-inch Pro, so it never entered that branch and kept the broken `background-attachment: fixed`. Mikhael found it on his iPad, 2026-11-06, on this show's front page: the mat scrolling along with the text. SO THE CURE IS KEYED TO THE POINTER, NOT TO THE WIDTH. Every touch device gets the mat as a fixed element; the phone branch below then overrides the PICTURE and its crop at phone widths, which is the one thing that really is about size. An iPad keeps the desktop picture, because at 820px and up the 1200x675 phone file would be blown up and read as mush — the very fault that made B20 cut `background-phone-v3.jpg` in the first place. THE DESKTOP RULE IS UNTOUCHED. Its vw/vh arithmetic is rule 27 and is load-bearing; a fine pointer never reaches this block. */ html, body { background-image: none; } html::before, html::after { content: ""; position: fixed; /* AND ITS BOX NEVER CHANGES SIZE, WHICH IS THE SECOND HALF OF THE SAME BUG. `bottom: 0` makes this box as tall as the window IS, and on a touch device that is not one height: scrolling up brings Safari's toolbar back and the window loses the toolbar's height as it comes. The box then resized on every frame of that animation, and a full-screen `cover` of a 3068x2031 photograph had to be re-drawn each time — with `#page-wash`'s translucent layer over it having to be re-blended against the new result, and a playing film on top of that. Mikhael, 2026-11-06, on his iPad held sideways: scrolling back up the press release made the words and the film disappear and then jump about. Scrolling DOWN was fine, which is the tell: that is the direction in which the toolbar is already out of the way. `100vh` IS THE STABLE ONE HERE, and it is the opposite choice from the film's. 100vh on a touch device is the LARGE viewport — the window with the toolbar hidden, which is the biggest it ever gets and does not move while you scroll. This box has to COVER, so it wants the largest; the film has to FIT, so it wants `svh`, the smallest. With the toolbar showing, the foot of this box is simply off the bottom of the screen, which costs nothing: it is a backdrop. THE PHONE BRANCH BELOW PUTS `bottom: 0` BACK. His phone crops are anchored to the box (`left bottom` upright), so a taller box would move the protractor fan out of the corner he chose. The phone keeps the box it has always had. */ top: 0; right: 0; left: 0; height: 100vh; z-index: -1; background-image: url('/images/background-desktop-v2.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; } /* HELD UPRIGHT, AN iPAD SHOWED THE MIDDLE OF THE MAT AND NONE OF THE FAN. His, 2026-11-07: *"we previously changed the position of the background cutting matt for mobile... but it is not like this in vertical ipad."* The crop he chose for a phone held upright is the picture's bottom-left corner -- the protractor fan in the corner, the ruler's circles along the foot -- and it is written twice below, as `6% center` on the landscape phone file and as `left bottom` on `background-phone-v3.jpg`. An iPad got neither, because it keeps the DESKTOP picture (see the note above: the phone file would be blown up to mush at 820px and wider) and the desktop picture was still centred. WHAT CENTRED COSTS HERE. `background-desktop-v2.jpg` is the whole 3611x2031 original at 2400x1350. Upright, `cover` is bound by the HEIGHT, so only about 39% of the picture's width is on screen -- and centred, that 39% is the middle of the mat: grid lines and diagonals, no fan, no ruler. It is the same fault B20 found on the phone, in the one place B20's cure did not reach. SO THE POSITION FOLLOWS HIS CHOICE AND THE PICTURE DOES NOT. `left bottom` on the desktop file frames the corner he chose, at full resolution. PORTRAIT ONLY, ON PURPOSE. Held sideways the picture's own shape nearly fills the screen and the centred crop is the one he approved on the walk page on 2026-11-07; nothing there moves. `bottom` does nothing upright, where the height binds and there is no vertical overflow to position -- it is written for the shape of a wider tablet, and because `left bottom` is the phrase his phone rule already uses. */ @media (orientation: portrait) { html::before, html::after { background-position: left bottom; } } } @media (max-width: 800px), (max-height: 500px) and (pointer: coarse) { /* iOS WILL NOT HOLD A FIXED BACKGROUND STILL, SO THE MAT MOVES TO A FIXED ELEMENT. Safari on a phone sizes a `fixed` background against the whole scrolling page rather than against the window, and all three symptoms follow from that one fact: the picture drifted as you scrolled, it repeated itself once the page ran longer than a screen, and it left white down the sides. Mikhael found all three on his phone, 2026-10-29 — "the background should be fixed and NOT scroll with the text". A fixed ELEMENT is reliably the window on every phone, which is why `#page-wash` sitting over the mat has always behaved. So `html` stops carrying a picture here and `html::before` carries it instead, behind everything at `z-index: -1`. THE DESKTOP RULE IS LEFT ALONE: it works, and its vw/vh arithmetic is load-bearing — see the note above it before touching it. */ html { background-image: none; } /* THE WHITE BARS IN LANDSCAPE ARE THE NOTCH MARGIN, AND A FLAT COLOUR IS THE ONLY THING THAT REACHES THEM. Held sideways, Safari lays the page out 59px in from each edge to clear the camera notch, and what is left outside is painted with the page's background COLOUR — not its picture, and not anything the page itself draws. The mat is a fixed element, so it stops at the page's edge and those two strips came out white. Mikhael, 2026-10-29: "still has those white bars on the sides in horizontal mode". MEASURED OFF HIS OWN SCREENSHOT, not guessed: both bars are exactly 59 CSS px, and the menu's safe-area padding is sitting at its 14px fallback — which is what a page gets when it is NOT in cover mode. `viewport-fit=cover` is declared in every viewport meta on this site and Safari is ignoring it; why, nobody here could establish. BLACK, AND IT IS HIS CALL: *"black makes more sense i think because it blends with the notch etc"* (2026-10-29). It was first built in the mat's own colour — rgb(160, 213, 216), sampled two ways and agreeing to within a few units — and he chose black over it, so the strips read as more bezel rather than as a flat panel that nearly matches the photograph and doesn't. Black is also the site's ink everywhere but the index (rule 24). LANDSCAPE ONLY, ON PURPOSE. The margin exists only with the phone turned, and a black canvas in portrait could do nothing but flash black before the mat arrives. SET ON `html` ALONE, never on `body`, whose own background would paint over the mat. HOW FAR THIS WAS CHECKED: nothing available here has a notch, so the reading above fits two measurements but was never watched working. */ @media (orientation: landscape) { html { background-color: #000; } } html::before, html::after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* `bottom`, not the `height` the iPad block above sets: his crops here are measured against a box the height of the window, and `left bottom` holds the fan to its foot. See that block for why it differs. */ height: auto; z-index: -1; background-image: url('/images/background-phone-v2.jpg'); background-repeat: no-repeat; background-size: cover; /* The crop sits left, not centred: this picture is landscape, `cover` shows only a quarter of its width, and centred that quarter was empty mat. 6% of the overflow puts the protractor fan in the bottom-left corner. A phone held sideways fills the width exactly, so it does nothing there. */ background-position: 6% center; } } /* A PHONE HELD UPRIGHT GETS ITS OWN PICTURE, AND THAT IS WHERE THE CROP LIVES. The landscape file above is 1200x675. Upright, a phone shows about 312 of those pixels across roughly 1179 real ones — a blow-up of nearly four times, which is why every line on the mat read as mush. This is cut from `images/background.jpg`, the 3611x2031 original, at its own resolution and already framed on the fan, so it arrives at about 1:1 and the crop is chosen in the picture rather than as a percentage here. `left bottom` holds the fan in the corner whatever shape the phone is. His, 2026-10-29. */ @media (max-width: 540px) and (orientation: portrait) { html::before, html::after { background-image: url('/images/background-phone-v3.jpg'); background-position: left bottom; } } /* THE LINE THE SCROLL DISAPPEARS UNDER, ON A PHONE (task B44, 2026-11-10). His: "the text and images disappear correctly before they reach the menu, as they currently do correctly on Joburg Landscape works page." The menu bar has no background of its own — the mat shows through it — so on a page that scrolls as a whole, the words and pictures ran up behind his name. The works page never had that, because its pictures scroll inside a box of their own that starts 10px under the bar; this puts the same line on every page instead of each page remembering to build that box. IT IS A STRIP OF THE GROUND, NOT A NEW COLOUR. `html::after` is drawn with every rule that draws the mat in `html::before` above — the two share each selector — so it is the same photograph, in the same place, at the same size, and lifted over the page's content. The inset shadow is `#page-wash`'s own 60% white, painted over it. Clipped to the top of the screen down to `--nav-bottom` + 10px — the works page's line — it is invisible except as the edge content vanishes at. Nothing about how any page scrolls is changed. The whole box is kept and clipped, rather than made short, because the mat's `cover` is worked out from the size of its box: a short box would draw the photograph at a different size and the strip would show. 21: over the page's content (10), under the menu's panel (22) and its bar (23). The works page's wash and column (24, 25) stay above it, so a work that is open is untouched. ONLY WHILE THE MENU IS A BAR. Outside that query the mat rules above would still draw a second, hidden mat on an iPad held sideways; `content: none` stops it being made at all. */ html::after { content: none; } @media (max-width: 800px), (orientation: portrait) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) { html::after { content: ""; z-index: 21; clip-path: inset(0 0 calc(100% - var(--nav-bottom, 40px) - 10px) 0); box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.6); pointer-events: none; } }