Voulk / QuestionablyEpic

33 stars 24 forks source link

Graphs are broken in Safari #950

Open filliph opened 1 year ago

filliph commented 1 year ago
image

If you don't have access to a Mac to test, I can have a crack at it if you point me in the direction where to look, as I have some experience with React. I'd also need to know whether there are any .env files I'd need or anything else needed to get a dev instance of the app running 🙂

filliph commented 1 year ago

The label issue can be resolved by removing position: "relative", top: 2 from https://github.com/Voulk/QuestionablyEpic/blob/master/src/General/Modules/TrinketAnalysis/Charts/VerticalChart.js#L89, which also fixes an alignment issue with the labels in Chrome:

image
filliph commented 1 year ago

As it turns out, the label issue is the only actionable issue; recharts is applying some very dumb scaling when using sidebar tabs (this behaviour can probably also be seen in MS Edge and any other browser that supports sidebar tabs) where it scales down the vertical size of the bars as well.

This explains why the bars look smaller in Safari compared to Chrome.

I don't know if that behaviour can be changed in the recharts plugin.

filliph commented 3 months ago

@Voulk bump, this is still an issue as of today and the fix posted in https://github.com/Voulk/QuestionablyEpic/issues/950#issuecomment-1458525027 is still valid.

Voulk commented 2 weeks ago

Thanks, I've put a fix through in the next version. Let me know if that fixes it since I don't have a good Safari test environment.