when using >30 via points markers are flickering

Question

when using >30 via points markers are flickering

oblonski opened this issue 2 years ago · 9 comments

https://graphhopper.com/maps/?point=48.086418%2C11.516493&point=48.142054%2C11.603417&point=48.195685%2C11.639696&point=48.096068%2C11.469586&point=48.161721%2C11.616871&point=48.212783%2C11.58952&point=48.116753%2C11.594491&point=48.196416%2C11.495952&point=48.099636%2C11.509812&point=48.214799%2C11.588871&point=48.095683%2C11.505432&point=48.143908%2C11.622334&point=48.204166%2C11.485417&point=48.194357%2C11.497039&point=48.137186%2C11.5443&point=48.201069%2C11.543265&point=48.141888%2C11.512126&point=48.14803%2C11.590705&point=48.088323%2C11.646125&point=48.107573%2C11.650032&point=48.113228%2C11.643367&point=48.216628%2C11.584057&point=48.215117%2C11.54795&point=48.128981%2C11.517623&point=48.133896%2C11.459768&point=48.143893%2C11.457942&point=48.127278%2C11.540834&point=48.115497%2C11.600284&point=48.216716%2C11.529197&point=48.144926%2C11.475075&point=48.166171%2C11.52805&point=48.178291%2C11.486272&point=48.148785%2C11.520342&point=48.132815%2C11.503083&point=48.182696%2C11.565188&point=48.15552%2C11.604776&point=48.208816%2C11.600266&point=48.205496%2C11.591232&point=48.164339%2C11.585677&point=48.167881%2C11.625037&point=48.211879%2C11.64111&point=48.098441%2C11.60107&point=48.184687%2C11.608079&point=48.192936%2C11.666793&point=48.084732%2C11.660394&point=48.161065%2C11.505196&point=48.211481%2C11.565816&point=48.200929%2C11.662529&point=48.116079%2C11.66827&point=48.117044%2C11.591513&profile=car&layer=Omniscale

Answer 1 · 2023-03-09T10:31:18.000Z

my console says: Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true

Answer 2 · 2023-03-09T10:32:07.000Z

Oh, wow. Is an issue for chrome and firefox and starts as soon as I zoom (before it is fine).

Answer 3 · 2023-03-09T10:52:30.000Z

This is super strange, now I cannot reproduce this steady flickering anymore for firefox. It flickers but only very short.

my console says: Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true

We could try to upgrade to 7.2.2 (or the most recent 7.3.0) and see if it helps: openlayers/openlayers#14221 (comment)

Answer 4 · 2023-03-09T10:56:55.000Z

The upgrade to 7.3.0 (using ol-mapbox-style:10.1.0) helps with the warning, but not with the flickering.

Answer 5 · 2023-03-09T10:59:30.000Z

It might be related to https://stackoverflow.com/questions/74101155/chrome-warning-willreadfrequently-attribute-set-to-true

but I have absolutely no clue at the moment where and how to set willReadFrequently to true

Answer 6 · 2023-03-09T11:03:43.000Z

It has probably to do with (re)rendering the images in the via markers

new Style({
                image: new Icon({
                    src: 'data:image/svg+xml;utf8,' + createSvg(feature.get('gh:marker_props')),
                    displacement: [0, MARKER_SIZE / 2],
                }),
            })

If I only use markers of type QueryPointType.FROM, it does not flicker anymore.

Answer 7 · 2023-03-09T11:06:58.000Z

... but also from markers get an image

Answer 8 · 2023-03-09T11:09:01.000Z

But my observation is that FROM Markers do not flicker whereas VIA markers do. And the only differences are the color and that via markers have numbers.

Answer 9 · 2023-03-09T11:14:48.000Z

I think I have it fixed. Will create a PR.