From d390c37afd2ca35b0116b17da17b21739f41facd Mon Sep 17 00:00:00 2001 From: cvanelteren Date: Wed, 25 Mar 2026 17:10:19 +1000 Subject: [PATCH 1/4] fix: restore brand text on iOS by isolating from backdrop-filter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Shibuya's .sy-head-blur uses -webkit-backdrop-filter: blur(), which causes -webkit-background-clip: text on sibling elements to silently fail in iOS Safari — making the 'UltraPlot' nav link invisible. Adding isolation: isolate to .sy-head-brand creates a new stacking context, shielding the gradient text compositing from the blur layer. Restore svg --- docs/_static/custom.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 8cbe3d9e8..be2fe4d2f 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -84,6 +84,12 @@ gap: 0.5rem; padding: 0.2rem 0.04rem 0.2rem; line-height: 1.25; + /* Shibuya's .sy-head-blur sibling uses -webkit-backdrop-filter: blur(). + On iOS Safari, backdrop-filter on any element in the same stacking + context breaks -webkit-background-clip: text in descendants, making + the brand text invisible. isolation: isolate creates a new stacking + context here so the gradient clip composites independently. */ + isolation: isolate; } .sy-head .sy-head-brand strong { From 0021200c2f8452517f6036ddf308685309f51025 Mon Sep 17 00:00:00 2001 From: cvanelteren Date: Thu, 26 Mar 2026 10:31:30 +1000 Subject: [PATCH 2/4] fix: force breadcrumbs into own compositing layer on iOS Safari Plain text in .sy-breadcrumbs-inner was invisible on iOS while CSS-mask icons in the same bar rendered fine. Caused by the sticky header's -webkit-backdrop-filter creating a GPU layer that disrupts adjacent sticky elements' text rendering path. transform: translateZ(0) on .sy-breadcrumbs-inner promotes it to its own compositing layer, isolating text rendering from the blur layer. Also consolidates the related isolation: isolate comment for the existing header brand gradient fix. --- docs/_static/custom.css | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index be2fe4d2f..5fd0921e4 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -78,20 +78,34 @@ padding-right: 1.25rem !important; } +/* ── iOS Safari compositing fix ───────────────────────────────────────────── + Shibuya's .sy-head-blur uses -webkit-backdrop-filter: blur(12px), which + creates a GPU compositing layer. On iOS Safari this disrupts rendering of + two distinct things in sibling/adjacent sticky elements: + + 1. -webkit-background-clip: text → gradient text goes invisible + Fix: isolation: isolate on .sy-head-brand (creates its own stacking + context, shielding the gradient-clip composite from the blur layer). + + 2. Plain text rendering in .sy-breadcrumbs → link text goes invisible + while CSS-mask icons in the same bar remain visible (icons use + background-color + mask, a different GPU path than text). + Fix: transform: translateZ(0) on .sy-breadcrumbs-inner forces it into + its own compositing layer so text renders independently of the header. +────────────────────────────────────────────────────────────────────────── */ .sy-head .sy-head-brand { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.04rem 0.2rem; line-height: 1.25; - /* Shibuya's .sy-head-blur sibling uses -webkit-backdrop-filter: blur(). - On iOS Safari, backdrop-filter on any element in the same stacking - context breaks -webkit-background-clip: text in descendants, making - the brand text invisible. isolation: isolate creates a new stacking - context here so the gradient clip composites independently. */ isolation: isolate; } +.sy-breadcrumbs-inner { + transform: translateZ(0); +} + .sy-head .sy-head-brand strong { font-size: 0.74rem; font-weight: 700; From f500be44ff8f25cbab3068884118d1411307b6c7 Mon Sep 17 00:00:00 2001 From: cvanelteren Date: Thu, 26 Mar 2026 11:14:34 +1000 Subject: [PATCH 3/4] fix: replace U+25B8 triangle glyph with CSS border triangle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The ▸ (U+25B8) character used in the right-sidebar TOC toggle button was not guaranteed to be present in iOS system fonts, causing it to render as a "□?" tofu box on iOS. Replace with a CSS border-based right-pointing triangle that requires no font support and rotates cleanly to the down position on expand. --- docs/_static/custom.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 5fd0921e4..30a8b7dcc 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -1130,8 +1130,13 @@ body.wy-body-for-nav } .sy-rside .localtoc > ul > li > button.uplt-toc-toggle::before { - content: "▸"; - font-size: 2.02rem; + content: ""; + display: block; + width: 0; + height: 0; + border-style: solid; + border-width: 0.28rem 0 0.28rem 0.44rem; + border-color: transparent transparent transparent currentColor; transform: rotate(0deg); transition: transform 0.2s ease; } From 9f9a89b5282fb98162a1bc04664adc02265367f8 Mon Sep 17 00:00:00 2001 From: cvanelteren Date: Thu, 26 Mar 2026 11:44:20 +1000 Subject: [PATCH 4/4] fix: force GPU layer on sy-head-brand to restore gradient text on iOS --- docs/_static/custom.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 30a8b7dcc..7a962edcd 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -100,6 +100,7 @@ padding: 0.2rem 0.04rem 0.2rem; line-height: 1.25; isolation: isolate; + transform: translateZ(0); } .sy-breadcrumbs-inner { @@ -113,6 +114,7 @@ text-transform: uppercase; line-height: 1.25; color: #138a73; + transform: translateZ(0); background-image: linear-gradient( 90deg, #0f6d5f 0%,