🐞 fix: Update chrome tint implementation to use opacity for visibility and adjust related tests

styles/base/global.css

@@ -81,24 +81,23 @@ main#maincontent {
  * backgroundColor is updated at runtime by
  * static/js/modules/ChromeTint.js.
  *
- * visibility: hidden keeps the elements invisible to the user (so
- * they don't appear as dark bars over the page content) while iOS
- * Safari still samples their backgroundColor. The WebKit source
- * explicitly notes that visibility: hidden elements ARE sampled.
+ * opacity: 0 makes the elements fully transparent to the user (so
+ * they don't appear as dark bars over the page content) while the
+ * backgroundColor is still readable by iOS Safari's sampler.
  *
  * The elements are kept as small as possible (12px tall) so they
  * stay well within the iOS safe-area insets. They have no background
  * by default — they only get a backgroundColor when the matching
  * element (header / footer) is in view. pointer-events: none ensures
- * they never intercept clicks even if made visible.
+ * they never intercept clicks.
  *
  * (iOS 26 ignores <meta name="theme-color">; this technique is
  *  what replaced it.)
  */
 .chrome-tint {
+    opacity: 0;
     pointer-events: none;
     position: fixed;
-    visibility: hidden;
     z-index: 9999;
 }