Story mode map detachment on mobile

[Autio]

Brian reports:

1. use a map module on a dashboard and a mobile device with story mode
2. the map module acts normally
3. when scrolling, the map image decouples and scrolls with the page. The module itself stays in place

[broncha]

Cant replicate this one either. Do you have the specific dashboard (link) that has this problem?
This is how it looks on mine.

[Autio]

Believe it's this one from the Problem Report: https://portal.mwater.co/#/dashboards/a943e66c43c0404b9bd397aacf388918

[broncha]

There is no map widgets in that dashboard

[Autio]

May have been removed if it wasn't working. I'll ask Brian directly.

[Autio]

Brian says:

It appears that this only happens on iOS’s chrome browser and only after having clicked on the map, panned/zoomed, and then scrolled the page.

Can you replicate with that info on any dashboard with a map?

[broncha]

Cant replicate on iPhone X chrome

[broncha]

Finally reproduced.
I noticed, if I remove overflow style in the AutoSizeComponent, this goes away

@grassick you added this line here
https://github.com/mWater/react-library/blob/master/src/AutoSizeComponent.coffee#L49

did that fix the jitter? It appears this line introduced map tile detachment in ios

[grassick]

I'm not sure whether it did fix the jitter in the end! I'd try lots of resizing before removing it in production.

[broncha]

The resize listener we are using currently injects a div and some style, which I think is the source to the jitter too?
There is a new API in browsers called ResizeObserver . There's a polyfill too.

Here is a hook implementing that
https://github.com/rehooks/component-size, I tested it out replacing AutoSizeComponent and seems to be working as expected, with less code and less injected dom for resize detection.

Would it be worth refactoring, on the long run?

[grassick]

It doesn't support Safari, but the polyfill is good?

I love hooks, but a global refactor is pretty big. Maybe AutoSizeComponent could use hooks and this internally?