Graphs don't show up on Safari iOS 14

[VotusX]

Hey there,

I just wanted to draw attention to an issue I discovered. Using the latest version, I tried to display a graph inside of a WKWebView inside an iOS app I'm developing. On one of my testing devices (iPad Air 4th generation, iOS 14.2) the graphs aren't showing up, while they do on my other device (iPhone 14 Pro, iOS 16.0.2).

Trying to get to the bottom of this, I went to the project's website on that iPad and neither of the examples were visible. I connected to the javascript console via Safari on mac and got the errors visible in the first screenshot. In the second one, you can see what was visible instead of the sandbox.

Just wanted to let you know!

Best regards

[mauriciopoppe]

Thanks for the report, I'm also seeing similar issues with Safari in iOS 17.

I see that the graph renders but attempting to zoom causes it to throw a runtime error

TypeError: The provided value is non-finite

I tracked it to the d3-selection selection package attempting to assign undefined to the coordinates of an SVG Point

https://github.com/d3/d3-selection/blob/d8ea8005f87ca72496d748a91ab6e0ccbe1a2011/src/pointer.js#L10

I'm using the latest version of the d3-selection package. I saw that unfortunately this error was being thrown for a long time but because when you zoom there are many runs of the draw method, a few of the runs will be broken with the error above but it's just going to break that run.

[mauriciopoppe]

About the error you see US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn#browser_compatibility shows that Object.hasOwn was released in Safari 15.4, I'd suggest either polyfilling the app you have so that Object.hasOwn exists or to use a newer Safari version.

[VotusX]

Thanks for your suggestions! I will try and see. Are you planning to fix this issue in a future release?

[mauriciopoppe]

For the error: "TypeError: The provided value is non-finite", given that the issue is present in the d3-selection library and how it behaves on zoom in Safari I could only fix it if I patch it during build e.g. override the node_modules/d3-selection/src/pointer.js#L10 code.

For the Object.hasOwn I don't think I'll add the polyfill in the project given that's now natively supported in all the browsers, instead apps that use the library should polyfill it if the browser they target doesn't support this natively.