73f7f0fa4b3516871ff7a5f869b795372edcd185
max
  Fri Aug 21 01:34:32 2026 -0700
hgTracks: fix iPhone CSS - unreadable buttons and oversized text, refs #22278

On iOS Safari the nav/zoom/control buttons showed white text on the light-grey
button background because the page declared no color-scheme, so Dark Mode
auto-darkened the native buttons' text color while the author background stayed
light. And iOS text auto-inflation enlarged body text (blue-bar group labels,
tutorial notice, Zoom out, #size) but not form controls, giving wildly uneven
sizes. Both are iPhone-only.

In HGStyle.css :root, declare color-scheme: light and text-size-adjust: 100%,
and set an explicit color on the shared button rule as a backstop.

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index 7bee7f934a4..4b78759460d 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -1,15 +1,29 @@
+/* The browser UI is designed for a light background only. Declare that, so iOS
+ * Safari (and macOS Safari / Chrome) do not auto-darken native form controls in
+ * Dark Mode - which otherwise turns button text white on the light-grey button
+ * background, making the nav/zoom buttons unreadable on iPhones. */
+:root {
+    color-scheme: light;
+    /* Stop iOS Safari from auto-inflating "body" text (blue-bar group labels,
+     * the tutorial notice, "Zoom out", #size, ...) to a larger size than the
+     * form controls next to it, which leaves the page with wildly uneven text.
+     * 100% (not none) still lets the user pinch-zoom. */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
 body {
     font-family: Arial, Helvetica, sans-serif;
     background: #fff9d2;
 }
 
 body.cgi {
 	margin: 0;
 	padding: 0;
 	background: #FFF9D2;
 }
 
 body.hgTracks {
 	background: url("../../images/internal_bg1.jpg") repeat-x fixed left bottom #F9F9F7;
 }
 
@@ -38,30 +52,31 @@
         color: #aaa;
 }
 
 a:link {
         color: #121E9A; 
         text-decoration: underline
 }
 
 input[type="submit"], input[type="button"], button {
     border: 1px solid rgba(100, 100, 100, .5);
     border-radius: 3px;
     margin: 0;
     padding-top: 3px;
     padding-bottom: 3px;
     background-color: #EEE;
+    color: #000;
 }
 
 input[type="submit"]:hover, input[type="button"]:hover, button:hover {
     background-color: #E8E8E8;
 }
 
 #trackCtrlTable {
         width: 95%;
         margin-top: 6px;
 }
 
 .moveButtonText {
         font-size: 80%
 }