🐞 fix: Update chrome tint visibility handling to prevent dark bars over page content and enhance related tests

styles/base/global.css

@@ -81,11 +81,16 @@ 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.
+ *
  * The elements are kept as small as possible (12px tall) so they
- * stay well within the iOS safe-area insets and don't intrude into
- * the page content. They have no background by default — they only
- * become opaque when the matching element (header / footer) is in
- * view. pointer-events: none ensures they never intercept clicks.
+ * 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.
  *
  * (iOS 26 ignores <meta name="theme-color">; this technique is
  *  what replaced it.)
@@ -93,6 +98,7 @@ main#maincontent {
 .chrome-tint {
     pointer-events: none;
     position: fixed;
+    visibility: hidden;
     z-index: 9999;
 }