Conversation
The score digits inside the ballot bubbles never had a colour set. Not in BubbleGrid.tsx (its fontSX is font-size only), not in index.css (.circle sets background and border), and not by MUI — these are native <button> elements, not MUI Buttons. A <button> does not inherit .ballot's `color: var(--brand-black)`. It takes the UA stylesheet's ButtonText, which resolves to black on desktop and Android — masking the omission — and to the system tint on iOS WebKit, where the digits came out blue. That is Equal-Vote#1272. Two details from the screenshots that pin it down: the header star digits in the same picture are black, and they are the only ballot digits not inside a button; and the blue appears inside FILLED bubbles too, where the digit is meant to vanish against the black fill. That is the "in some cases" in the report — the same wrong colour, invisible everywhere else. Stating the colour makes every platform render what desktop already rendered. Verified in Chromium: the computed colour of both plain and filled bubbles is unchanged at rgb(0, 0, 0), so this is a no-op where it already worked. Not verified on an iPhone — I don't have one, and Playwright's WebKit isn't installed here. The diagnosis is from the markup and the CSS; if the blue survives this on a device, the cause is elsewhere.
|
Warning Review limit reached
Next review available in: 59 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
✅ Deploy Preview for bettervoting ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
1 participant
Description
Closes #1272. The score digits inside the ballot bubbles never had a colour set — not in
BubbleGrid.tsx(itsfontSXis font-size only), not inindex.css(.circlesets background and border), and not by MUI, because these are native<button>elements rather than MUI Buttons.A
<button>does not inherit.ballot'scolor: var(--brand-black). It takes the UA stylesheet'sButtonText, which resolves to black on desktop and Android — masking the omission for years — and to the system tint on iOS WebKit, which is where the blue comes from. Chrome on iOS is WebKit, so it behaves the same as Safari here.Two details in the screenshots pin it down:
Every other candidate mechanism is absent: no
-webkit-text-fill-coloranywhere, noappearanceresets, no:visited/:linkrules, noformat-detectionmeta (and single digits would not be linkified anyway), and the one global anchor rule isa { color: var(--brand-pop) }— which is green, not blue.Verification, and its limit
Verified in Chromium that the bubbles are
BUTTONelements and that the computed colour of both plain and filled bubbles is unchanged atrgb(0, 0, 0)— so this is a no-op where it already worked, which is the point.Not verified on an iPhone. I have no device, and Playwright's WebKit build isn't installed here. The diagnosis is from the markup and the CSS, and it explains all four observations; but if the blue survives this on a real device, the cause is elsewhere.
Related Issues
Closes #1272