Smarter opacity handling

src/ol/renderer/canvas/Layer.js

@@ -79,7 +79,7 @@ class CanvasLayerRenderer extends LayerRenderer {
   useContainer(target, transform, opacity) {
     const layerClassName = this.getLayer().getClassName();
     let container, context;
-    if (target) {
+    if (target && target.style.opacity === '') {
       const canvas = target.firstElementChild;
       if (canvas instanceof HTMLCanvasElement) {
         context = canvas.getContext('2d');

src/ol/renderer/canvas/VectorLayer.js

@@ -164,7 +164,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     if (declutterReplays) {
       const viewHints = frameState.viewHints;
       const hifi = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
-      replayDeclutter(declutterReplays, context, rotation, hifi, frameState.declutterItems);
+      replayDeclutter(declutterReplays, context, rotation, 1, hifi, frameState.declutterItems);
     }
 
     if (clipped) {
@@ -174,8 +174,9 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     this.postRender(context, frameState);
 
     const opacity = layerState.opacity;
-    if (opacity !== parseFloat(canvas.style.opacity)) {
-      canvas.style.opacity = opacity;
+    const container = this.container;
+    if (opacity !== parseFloat(container.style.opacity)) {
+      container.style.opacity = opacity === 1 ? '' : opacity;
     }
 
     return this.container;

src/ol/renderer/canvas/VectorTileLayer.js

@@ -478,7 +478,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       }
     }
     if (declutterReplays) {
-      replayDeclutter(declutterReplays, context, rotation, hifi, frameState.declutterItems);
+      replayDeclutter(declutterReplays, context, rotation, layerState.opacity, hifi, frameState.declutterItems);
     }
 
     return this.container;