sketchy map filter's causing safari and iOs slowdowns

[DanielJWood]

Moving this to an issue...Jacob flagged the slowness of the svg filters in safari, safari iOs (and I believe chrome iOS too). https://docs.google.com/spreadsheets/d/1zpbwrcAzgp_Q9xEh6enKuxEgjvFIZyY_CZdFjD6Tls0/edit#gid=0

For the time being we're removing the filters from the landmasses and keeping them only for the arrows going on top.

But I did some testing in Desktop Safari and found that some filters are more intensive than others...

This one is not nearly as bad, though I haven't tried it on iOS:

  var pencilTexture = defs.append("filter")
  .attr("x", "-2%")
  .attr("y", "-2%")
  .attr("width", "104%")
  .attr("height", "104%")
  .attr("filterUnits", "objectBoundingBox")
  .attr("id", "pencilTexture")
  pencilTexture.append("feTurbulence")
    .attr("type", "fractalNoise")
    .attr("baseFrequency", "1.2")
    .attr("numOctaves", "3")
    .attr("result", "noise")
  pencilTexture.append("feDisplacementMap")
    .attr("xChannelSelector", "R")
    .attr("yChannelSelector", "G")
    .attr("scale", "3")
    .attr("in", "SourceGraphic")
    .attr("result", "newSource");

It also seems that the lag is more pronounced when the globe is zoomed in, rather than zoomed out. That probably is more of a concern with either the path or simiplify functions, but i haven't tested this yet.

Here's where I was testing safari with the less intensive filter: https://observablehq.com/d/8ea650c7fdbbaef7

[DanielJWood]

@jsfenfen curious if you've encountered this with markers + filters clipping the markers :/ Maybe it's time to kick the filters to the curb entirely? This is the #PencilTexture referenced above on the lines, causing the marker to get clipped.

[DanielJWood]

Decided that there are too many technical issues here, so we're closing this.