Skip to content

Commit d390c37

Browse files
committed
fix: restore brand text on iOS by isolating from backdrop-filter
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
1 parent 6d700a9 commit d390c37

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

docs/_static/custom.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,12 @@
8484
gap: 0.5rem;
8585
padding: 0.2rem 0.04rem 0.2rem;
8686
line-height: 1.25;
87+
/* Shibuya's .sy-head-blur sibling uses -webkit-backdrop-filter: blur().
88+
On iOS Safari, backdrop-filter on any element in the same stacking
89+
context breaks -webkit-background-clip: text in descendants, making
90+
the brand text invisible. isolation: isolate creates a new stacking
91+
context here so the gradient clip composites independently. */
92+
isolation: isolate;
8793
}
8894

8995
.sy-head .sy-head-brand strong {

0 commit comments

Comments
 (0)