Incorrect blue button text on iphone 11 chrome

[ArendPeter]

Overview

The ballot buttons have blue text in some cases.

Action Items

Resources/Instructions

No response

I have set labels for the following more labels info

• Role
• Complexity

[masiarek]

Opened #1534. This one is diagnosable from the CSS with reasonable confidence.

The bubble digits are inside native <button> elements, and no authored rule sets their colour — not BubbleGrid.tsx (font-size only), not .circle in index.css (background and border only), and not MUI, since these aren't MUI Buttons. A <button> does not inherit .ballot's color: var(--brand-black); it takes the UA stylesheet's ButtonText, which is black on desktop and Android and the system tint on iOS WebKit. Chrome on iOS is WebKit, so it behaves like Safari here.

Two things in your screenshots pin it down:

• the header star digits in the same picture are black — and they are the only ballot digits not inside a button;
• the blue shows up inside filled bubbles too, where the digit is supposed to disappear against the black fill. That's the "in some cases": the same wrong colour, invisible everywhere else.

Everything else that could turn text blue on iOS is absent — no -webkit-text-fill-color, no appearance resets, no :visited/:link rules, no format-detection meta, and the only global anchor rule is green.

The fix states the colour, so every platform renders what desktop already did. Verified in Chromium that both plain and filled bubbles still compute to rgb(0, 0, 0) — a no-op where it already worked. Not verified on a device: if the blue survives this on your iPhone 11, the cause is somewhere else and I'd want a screenshot of the computed styles.