challenges with dragging and performance on mobile Firefox/Chrome, and on Safari (both mobile/desktop)

[Zan Armstrong]

Hi,

I recently made this example to compare the true areas of countries/continents around the world. 

Unfortunately there are still some browser/device specific issues I'm sorting out. 

It works well on Firefox/Chrome with a mouse and medium or large screen. 

Firefox/Chrome on mobile/small screen also works fairly well, but only if I disable dragging on the large world maps.  Otherwise it gets slow and seems to stutter.

Also, despite my using "preventDefault" and "touch-action: none", Firefox still doesn't seem to be fully distinguishing between scrolling the page and dragging within the svg.

There are a few problems on Safari.  First, it's really slow to load in the first place.  Second, the initial "path" elements for the large maps are corrupted.  I have a hack where it does an immediate update to the same state if the browser is Safari, but even that seems to fail initially but work on later reloads.  Lastly, "drag" on the large world stutters and fails to update, so I've disabled it for now.  Even on the small worlds, "drag" doesn't seem to trigger consistently.  I have to do a very deliberate "drag" to try to get it to sort-of catch.  This all does seem less problematic once I've been on the page for a while, even if I've reloaded.  It's making it harder to debug as the experience changes, but maybe suggests something is caching? 

In terms of load speed on Safari, Mike Bostock's example here loading a similar map with the same projection does work.  But ii is super slow to load initially (several seconds).  So, maybe Safari is just slow with regards to complex paths, and that slowness is causing other problems? 

My main questions are:

• best practices for distinguishing between scrolling the page and dragging elements within an svg for touch devices

• are there any relevant known issues on Safari with svg/D3 - especially around performance and complex paths, loading data, updating variables, etc.  And, any recommendations?

• any issues with Safari and dragging?
  

• any other ideas that might help me debug?
  

Thank you!

- Zan

[Scott Murray]

Zan, this is such a great project.  Did you receive any helpful replies, or figure it out on your own?

I can confirm the project is great in Chrome, but super slow and choppy in Safari (newest versions).

Cheers,

Scott

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.