'tapping an icon freezes a d3.js, SVG browsing website on mobile safari
I'm building a site and it works fine on desktop but on mobile it freezes during specific interactions.
Here is a demo: https://galiano-d3-test.surge.sh/
The site loads a layered SVG and allows you to pan/zoom. On the layer that loads in the link, you can click on the 'X's and they will animate the map.
When I try this on an iPhone 6s, and an iPhone 13 with iOS 15.4.1, if you tap an X the page doesn't permit any more touch actions. I don't think it's frozen because I can still change aspects of the site via live-reload (changing the CSS for example).
The "freezing" stops if I set the SVG to display:none. But that is not ideal.
Another odd thing is this is not a problem on my older phone (iPhone 6) running iOS 12.5.5. It works as expected there.
I don't know if this is a bug since it works fine on an older, less performant phone?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|