increase activation specificity for ios PWA statusbar workaround

Hunter
Tuesday, September 1st, 2026 at 12:32 AM


index.html+6 


resources/styles.css+2-2
index.html
23  			window.eventsData = fetchJson("resources/events.json")
24  				.catch(function () { return fetchJson("resources/demo.json"); });
25  		</script>
26 +		<script>
27 +			if (/iPad|iPhone|iPod/.test(navigator.userAgent) ||
28 +				(/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1)) {
29 +				document.documentElement.classList.add("is-ios");
30 +			}
31 +		</script>
32  		<link rel="stylesheet" href="resources/maplibre/maplibre-gl.css">
33  		<link rel="stylesheet" href="resources/styles.css">
34  	</head>
resources/styles.css
25  	display: none;
26  }
27  /* counteract colored drop shadow on iOS 27 beta status bar */
   -@media (display-mode: standalone) {
   -	#status-bar-tint {
28 +@media (display-mode: standalone) and (orientation: portrait) {
29 +	.is-ios #status-bar-tint {
30  		display: block;
31  		position: fixed;
32  		top: 0;