Color blurring on GeoServer WMS layer loading using OpenLayers 5

Question

I am using GeoServer 2.14.1 and OpenLayers 5 API to view the polygon data to my web map application using WMS service. I have used simple polygon style with black color.When zooming, the color of the data is fully occupied the screen (Chrome & Firefox) and then vanishing tile by tile as shown in the snapshot.

Before zooming

When zooming

Is this because of GeoServer style or do we need to configure anything at the layer publishing or do we need to tweak something in OpenLayers 5 CSS?

Answer 1

If you have configured OpenLayers to use TileWMS it's caused by OpenLayers zooming the canvas then taking noticeably longer to load some new tiles from the source than others, typically when the server response is slow. Setting transition: 0 in the source might improve things slightly, but it won't fix a slow server response.

If it is your base layer you could clear the canvas before composing the layer, so instead of blurring there's an empty space until the tiles load.

layer.on('precompose', function(evt) { 
    evt.context.fillStyle = colour;
    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
});