search

mWater / mwater-visualization

GNU Lesser General Public License v3.0
3 stars 5 forks source link

Story mode map detachment on mobile #440

Open Autio opened 4 years ago

Autio commented 4 years ago

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

IMG_0186 (1) IMG_0186

broncha commented 4 years ago

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

IMG_9608

Autio commented 4 years ago

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

broncha commented 4 years ago

There is no map widgets in that dashboard

Autio commented 4 years ago

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

Autio commented 4 years ago

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 commented 4 years ago

Cant replicate on iPhone X chrome

broncha commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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?