search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
501 stars 144 forks source link

Zoom performance issues from iOS 16 onwards #266

Closed pavodev closed 1 year ago

pavodev commented 1 year ago

Hello,

I'm developing an interactive graph and I noticed that it has really bad performance on iPhones since the iOS 16 update. The lag is a lot more noticeable when the graph is zoomed in and I try to pan the group, did anyone notice any performance issues related to zoom/pan on the latest iOS versions?

You can check out my web app on this https://course-glancer.netlify.app/glancer/square If you try the same web app on an android phone (i tried it on a Google Pixel 4), you will notice that the zoom/pan actions are butter smooth.

Fil commented 1 year ago

Thanks for the report. It would be helpful to isolate the issue a bit more—your app has a lot of code. Do you see the same performance issue on the examples available at https://observablehq.com/collection/@d3/d3-zoom, for instance?

pavodev commented 1 year ago

Hi,

Thanks for the quick reply! I tried the examples and everything runs smooth, the only difference I see is that my elements are filled with an image by using fill: url(#imageid) (the image is an .svg inside a defs element defined like this: <defs><pattern><image xlink:href="https://domain/image.svg"></image></pattern></defs>).

I tried to replace the image fillings with color fillings and the app runs smoothly again. The strange thing is that this wasn't an issue in iOS 15 as the app was running perfectly fine with image fillings... Do you have any advice on this?

Fil commented 1 year ago

Sorry, I don't know. What I would try is to put the defs in a separate svg element, but I have not tested and maybe it wouldn't change anything.