When adding draw interaction, it flickers while zooming in and out (Version 9.0.0) about openlayers HOT 38 CLOSED

@wjoel and everyone else affected by this issue, can you please test #15651: https://deploy-preview-15651--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html

from openlayers.

Ok, thanks for the feedback @radokostelnik. What about https://deploy-preview-15652--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html, does that fix the issue too?

from openlayers.

@radokostelnik Thanks for all the feedback, I was finally able to reproduce the issue - with a browser zoom of 150 %! The reason is that the vector renderer calculates the canvas width and height from the frame state's size, whereas other renderers from the frame state's extent and resolution. That resulted in a different canvas width, which made the vector layer renderer clear the existing image of the tile layer.

By changing the calculation to be the same for all renderers, I fixed the issue.

Can you please confirm by going to https://deploy-preview-15652--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html again in a few minutes?

from openlayers.

Can you please try if the problem goes away when you npm install ol@dev?

from openlayers.

Reproducible in 9.0.0 version of Draw and Modify Features example: https://openlayers.org/en/v9.0.0/examples/draw-and-modify-features.html

The same example in 8.2.0 is OK: https://openlayers.org/en/v8.2.0/examples/draw-and-modify-features.html

from openlayers.

@radokostelnik What exactly are the steps to reproduce? Also, does it work as expected in https://openlayers.org/en/main/examples/draw-and-modify-features.html

from openlayers.

@ahocevar Steps:

• Open the page
• Zoom in/out using mouse wheel or the zoom -+ buttons or "zoom to area" interaction.

The OSM map flickers and randomly ends up blank. I can reproduce the same also in the main version.

Further info: I tried to build the example locally, but I could not reproduce it in that trimmed version.

from openlayers.

Thanks @radokostelnik. So you‘re saying when running the example from a local clone of OpenLayers with npm start, it works as expected?

from openlayers.

@ahocevar Not exactly a local clone. I created the 3 files from the example on the disk, ran 'npm start'. In this case, the behavior is not reproducible with [email protected].

When running npm run serve-examples from a local clone, the behavior is reproducible.

from openlayers.

( Thanks for the report! Just as another data point: I was also experiencing the exact same problem since an upgrade to 9.0.0 of our maps application. But somehow the zooming flickering does not always happen and only happened on mobile firefox and so I did not yet report it.

update: you can always see the zooming flickering in mobile firefox 123.1.0 if a route is drawn and sometimes the map completely disappears. )
update 2: for now we reverted the app to openlayers 8.1.0 so the flickering won't show up

from openlayers.

I saw flickering when upgrading to 9.0.0 as well. A possible workaround (works for me) is to use the WebGL renderer, import TileLayer from "ol/layer/WebGLTile".

I tried the "Draw and Modify Features" example on my laptop at work, and it did not flicker. At home, it flickers, and goes blank at some zoom levels, but after I've drawn a circle it stops flickering and doesn't go blank. Very odd.

The page linked by @karussell flickers constantly and "reliably" ends up with a blank map (I can try it at work tomorrow).

Using Chromium (at home, didn't try it at work), both pages work fine.

Maybe it has something to do with Nvidia drivers?

Desktop at home, flickers: Fedora, Sway, Wayland, Firefox Nightly, Nvidia proprietary drivers.
Laptop at work, doesn't flicker: Fedora, Sway, Wayland, Firefox, Intel graphics.

from openlayers.

Thanks for all the reports so far. I suspect this is a duplicate of #15593.

I'm still not sure whether the issue has been fixed since v9.0.0 or not. Can anyone who experiences the flickering please try https://deploy-preview-15620--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html ? Thanks!

from openlayers.

@ahocevar that works the same for me at least - flickers on zoom and the map sometimes disappears, but again it stops flickering once I've placed a marker (I guess doing so triggers some sync/redraw on zoom changes that doesn't happen otherwise?).

from openlayers.

Thanks for all the reports so far. I suspect this is a duplicate of #15593.

I'm still not sure whether the issue has been fixed since v9.0.0 or not. Can anyone who experiences the flickering please try https://deploy-preview-15620--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html ? Thanks!

I still see random flickering on the preview-15620 page. After placing a geometry it usually stops, but after panning to another location and/or zooming in it starts again.
Windows + Chrome or Edge, Nvidia graphics.

from openlayers.

Thanks everyone so far. Can anyone do a git bisect with npm start and a local clone of the library to find out which commit introduced the flickering?

from openlayers.

git bisect points to 628deb0.

from openlayers.

Thanks @wjoel, this confirms my suspicion. If you have the test setup still available, can you please try if #15649 fixes the problem?

from openlayers.

If anybody else wants to test a potential fix, please try https://deploy-preview-15649--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html.

from openlayers.

@ahocevar it unfortunately doesn't help, same issue. Maybe there are other changes made since that could affect this, as to my eyes your PR seems to revert the problematic change? I double checked and 9aa5f20 works for me, no flickering on that one.

from openlayers.

@wjoel 9aa5f20 was merged before #15344.

The change in #15649 does not fully revert the changes from #15344, it only brings back the use of the DOM to create a transform matrix with modifies parameters.

I'm going to create another pull request, reverting all changes related to that.

from openlayers.

@ahocevar Looks good to me, no flickering.

from openlayers.

@ahocevar thank you very much, both examples works fine, no flickering before or after drawing features.

from openlayers.

@ahocevar This is strange. I see flickering in the #15652 version, but only in Chrome (Version 122.0.6261.129 (Official Build) (64-bit)). Edge (Version 122.0.2365.92 (Official build) (64-bit)) on the same machine does not flicker.

from openlayers.

@radokostelnik So you're saying that #15651 works reliably and #15652 does not?

from openlayers.

@ahocevar Yes, that's what I'm seeing here.

from openlayers.

@ahocevar Attached a screen capture video from the #15652 version.

from openlayers.

@radokostelnik When the test website for #15652 has been rebuilt in a few minutes, can you please try again? I made a change so the transform matrix will be the same as in #15651.

from openlayers.

@ahocevar Tested now on https://deploy-preview-15652--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html, still seeing the flickering.

from openlayers.

@radokostelnik Did you clear the cache? And you‘re sure there is no flickering with #15651?

from openlayers.

@ahocevar Yes, "Empty Cache and Hard Reload", multiple times, in both Chrome and Edge. I don't see flickering in 15651, I do in 15652, in both of them.
TBH, I'm not "sure" about no flickering in 15651, but based on my quick tests, I can't see it there.

from openlayers.

@radokostelnik For both versions: what’s the output of document.querySelectorAll('.ol-layers canvas').length?

from openlayers.

@ahocevar 1 for 15652, 2 for 15651

from openlayers.

Hi all

The problem occurs not after drawing, but after resizing the map. Just open the f12 developer console to play.

But playback does not occur in all browsers.
For example, I have

reproduced in Microsoft Edge (122.0.2365.92), Yandex browser (24.1.4.827)
does not play in Chrome (122.0.6261.129), Firefox (123.0.1)

In the options below the bug is not reproduced
(https://deploy-preview-15651--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html)
(https://deploy-preview-15652--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html)

from openlayers.

@ahocevar Looks good, I can't reproduce flickering on https://deploy-preview-15652--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html.

from openlayers.

Thanks @radokostelnik, anyone else want to try?

from openlayers.

@ahocevar Confirm, looks good

from openlayers.

Nice work! I can confirm, no flickering on https://deploy-preview-15651--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html or https://deploy-preview-15652--ol-site.netlify.app/en/latest/examples/draw-and-modify-features.html

from openlayers.

Thanks a lot @ahocevar! For our case the flickering is fixed too with the latest 9.1.0 release.

from openlayers.