search

nprapps / ice-melt

https://apps.npr.org/arctic-ice-melting-climate-change/
Other
0 stars 0 forks source link

sketchy earth map not loading land on mobile #100

Closed jsfenfen closed 1 year ago

jsfenfen commented 1 year ago

Having issues on iPhone XS running ios 16.1.1, both safari and chrome. This is also true of the observable prototype.

jsfenfen commented 1 year ago

This seems to render: https://observablehq.com/@d3/sketchy-earth But this seems not to: https://observablehq.com/d/47052420c8c150f5

jsfenfen commented 1 year ago

Safari on desktop silently fails silently to render the land / graticules here: https://observablehq.com/d/4941020b7e992148

jsfenfen commented 1 year ago

Tethering phone to computer shows there are no errors here, but the land doesn't render. http://stage-apps.npr.org.s3.amazonaws.com/artful-letter/test2.html

DanielJWood commented 1 year ago

That's the first one where I applied svg filters to the globe lines. It's probably where the error arises. Not sure exactly why though yet...

DanielJWood commented 1 year ago

Interestingly the grid lines work as expected on mobile on this subsequent fork: https://observablehq.com/d/bb265e5f8575d2b6

DanielJWood commented 1 year ago

okay maybe a safari issue itself. When I run those observable notebooks on safari i see similar things to what I see on mobile (i.e. certain lines are not showing up).

jsfenfen commented 1 year ago

FWIW I see the same issue on chrome on Ios; in the current state of the map as included in alaska-wildfires the land isn't drawn but everything else is

jsfenfen commented 1 year ago

The pencil effect filter observable page does work on phone on IOS: https://observablehq.com/@matthewturk/pencil-effect-filters

DanielJWood commented 1 year ago

So far we've observed something like this on: Safari MacOS Safari iOS Chrome iOS

In all cases, removing the filter from the svg remedies the problem. So the task is figuring out why the filter is not working in these environments.

DanielJWood commented 1 year ago

Seems to have fixed things...

pencilTexture3.append("feColorMatrix")
    .attr("type", "matrix")
    .attr("values", "0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5")
    .attr("result", "f2");
  pencilTexture3.append("feComposite")
    .attr("operator", "in")
    .attr("in2", "f2")
    .attr("in", "SourceGraphic")
    .attr("result", "f3");

The "in2" should have matched the previous result "f2". Instead, it was "f2b". Likely a typo.