forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
feat(ui): exclude GradientMask from mobile Safari and adjust mobile height
+30
-1
+30
-1
src/components/ui/GradientMask.astro
+30
-1
src/components/ui/GradientMask.astro
···
5
5
<script>
6
6
let mask: HTMLElement | null = null
7
7
let ticking = false
8
+
let isMobileSafariBrowser = false
9
+
10
+
// Check if the browser is mobile Safari
11
+
function isMobileSafari(): boolean {
12
+
if (typeof window === 'undefined') return false
13
+
14
+
const ua = navigator.userAgent
15
+
const platform = navigator.platform
16
+
17
+
const isIOSDevice = /iP(ad|hone|od)/.test(ua) || (platform === 'MacIntel' && navigator.maxTouchPoints > 1)
18
+
19
+
if (!isIOSDevice) return false
20
+
21
+
const isSafari = /Safari\//.test(ua) && !/(CriOS|FxiOS|EdgiOS|OPiOS|DuckDuckGo)/.test(ua)
22
+
if (!isSafari) return false
23
+
24
+
const isMobileLike =
25
+
window.matchMedia?.('(pointer: coarse)').matches || window.matchMedia?.('(max-width: 768px)').matches
26
+
27
+
return Boolean(isMobileLike)
28
+
}
8
29
9
30
function updateMask() {
31
+
if (isMobileSafariBrowser) return
10
32
if (!mask) {
11
33
mask = document.querySelector('.gradient-mask') as HTMLElement
12
34
}
···
32
54
}
33
55
34
56
function initGradientMask() {
57
+
isMobileSafariBrowser = isMobileSafari()
35
58
mask = document.querySelector('.gradient-mask') as HTMLElement
59
+
60
+
if (isMobileSafariBrowser && mask) {
61
+
mask.style.display = 'none'
62
+
return
63
+
}
64
+
36
65
updateMask()
37
66
}
38
67
···
47
76
top: 0;
48
77
left: 0;
49
78
width: 100%;
50
-
height: 1.5rem;
79
+
height: 2rem;
51
80
z-index: 99;
52
81
pointer-events: none;
53
82
background-color: var(--bg);