Fix of LineChart display on Safari (iPhone) #783
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is fix that I found to the issue I filed recently: #782
As I mentioned there are some differences in displaying
<svg>
element on Safari when noviewport
prop specified, and originally LineChart was displayed like this in my minimal reproduction repo:Deployed example for quick check: https://safari-charts-bug.vercel.app/
As I found out the problem was with method
lineSvgComponent
ofLineChart
component. Original code didn't provide any viewport or size of SVG element:There was a few options to fix this issue - specify height prop, specify viewport prop, but I decided to apply style with
{ overflow: "visible" }
as in my opinion most universal option. After this changes LineChart started to display as expected:Branch of example repo with applied patch: https://github.com/rodnoycry/safari-charts-bug/tree/fixed
Deployed example (you need to copy and paste exact link, as it in preview state of deploy):
https://safari-charts-bug-git-fixed-rodnoycrys-projects.vercel.app/?_vercel_share=soSBCrIc6VDSWWArC7WcvJssXF0AhQr1