Some graph elements sometimes don't render on webkit-based browsers

[emeraldfleur]

Desiderata

• Replicate the replicata consistently?
• Highlight what's wrong or missing in the resultata screenshots (bright red line? guiding lines?)

---

I've been experiencing this issue for months now and it's driven me crazy, enough to switch to Google Chrome on macOS, even though I vastly prefer Safari for energy efficiency and macOS integration. But my inability to replicate it outside of ALL THREE of my Apple devices (MacBook, iPad, iPhone) had made me feel crazy (and finding an inability to replicate this issue by others).

In each case below we're using a webkit-based browser to view the graph of one of our own goal pages, while logged in to Beeminder.

This does NOT replicate on Google Chrome macOS, but does replicate on Google Chrome iOS, which uses the same rendering engine as Safari if I am not mistaken. I even logged into a cloud computing platform running multiple versions of Safari and macOS, spun up a macOS machine and was unable to replicate the problem. Every goal I logged into looked like the expectata. That made me give up on filing a bug report until today, hoping some new macOS / Safari / road iteration would fix it.

---

Replicata Case 1

1. On macOS and Safari 18.3 (version numbers are in lockstep)
2. View a goal page

Expectata (all cases)

All of the usual Beeminder elements render properly. (Screenshot taken in macOS 15.3 Google Chrome Version 132.0.6834.160 (arm64))

Resultata Case 1

Infuriatingly, this bug only happens half the time. Refreshing the page doesn't change anything.

---

Replicata Case 2

1. On iPadOS / Safari 18.2.1 (they have the same version numbers)
2. View a goal page

Resultata Case 2

Curiously, the same two goals exhibited the same behavior.

---

Replicata Case 3

1. On iOS / Safari 18.3 (Same version numbers) iPhone 13 Pro
2. View a goal page

Resultata Case 3

---

Replicata Case 4

1. On iOS 18.3, Google Chrome iOS (NOT Chromium, webkit-based) 132 (if I am not mistaken; may be wrong on the rendering engine basis)
2. View a goal page

Resultata Case 4

---

Replicata Case 5

1. Open Beeminder app iOS iPhone
2. Tap on a goal
3. Tap the share icon to open goal page in the embedded Safari (webkit) browser

Resultata Case 5

Cognata

• Include external resources in SVG #277
• Beebrain errors render as black boxes in the SVG #78

Verbata: browser-specific bugs, page rendering, browser idiosyncrasies, chrome vs firefox vs safari, svg rendering, svg not rendering consistently,

[dreeves]

GPT-o3 sounds like it knows what to do about this:
https://chatgpt.com/share/681d32f1-59a0-800d-9cbc-fa5a22c3a4ef