Issues with Removing Blur Effect Canvas in Mac Safari

Question

Issues with Removing Blur Effect Canvas in Mac Safari

Gautam Goklani 0

The following block of code in React.js works properly on Chrome and Edge, but experiences issues in Mac Safari.
User's image

In Mac Safari, when the blur background effect is initiated, a canvas gets added. However, when attempting to stop the blur effect, this canvas remains, leading to memory issues. Efforts to programmatically remove the canvas have been unsuccessful.

Prabhavathi Manchala 815 Microsoft External Staff

Hi Gautam Goklani,

When your React app applies a blur effect in Safari on Mac, it creates an extra layer <canvas> element that doesn’t get removed properly when the effect is turned off. This happens because Safari handles blurring differently than Chrome or Edge, which can lead to memory issues over time.

From the code, the blur effect starts with videoEffectsFeatureApi.startEffects(effect) and stops with videoEffectsFeatureApi.stopEffects(), but in Safari, a <canvas> element may still remain after stopping the effect. To make sure this extra <canvas> is properly removed in Safari.

Please try the updated code below.

useEffect(() => {
  const blurEffect = async () => {
    try {
      if (toggleStates.blurBackground && videoEffectsFeatureApi) {
        videoEffectsFeatureApi.startEffects(effect);
      } else {
        videoEffectsFeatureApi?.stopEffects();
        // Ensure Safari cleans up the extra canvas
        setTimeout(() => {
          document.querySelectorAll('canvas').forEach(canvas => {
            if (canvas.style.position === 'absolute' && canvas.style.zIndex === '-1') {
              canvas.remove();
            }
          });
        }, 100); // Delay to ensure stopEffects completes first
      }
    } catch (error) {
      console.error("Error while Applying Blur Background Effect", error);
    }
  };
  blurEffect();
}, [videoEffectsFeatureApi, toggleStates.blurBackground]);

Suresh Chikkam 1,100 Microsoft External Staff

Hi Gautam Goklani,

Safari holds onto the <canvas> element created by the ACS video effects, especially if it’s using WebGL. Just removing the canvas from the DOM isn’t always enough because the WebGL context can still consume memory.

Updated Code:

useEffect(() => {
  const blurEffect = async () => {
    try {
      if (toggleStates.blurBackground && videoEffectsFeatureApi) {
        await videoEffectsFeatureApi.startEffects(effect);
      } else {
        await videoEffectsFeatureApi?.stopEffects();
        // Safari-specific cleanup after a slight delay
        setTimeout(() => {
          const galleryElement = document.getElementById('video-gallery-container') || document.body;
          const canvases = galleryElement.querySelectorAll('canvas');
          canvases.forEach((canvas) => {
            const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
            if (gl) {
              const ext = gl.getExtension('WEBGL_lose_context');
              if (ext) {
                ext.loseContext(); // Release GPU memory in Safari
              }
            }
            // Additional filters for Safari canvas (style-based or data attributes)
            if (canvas.dataset.effectLayer !== undefined || 
                (canvas.style.position === 'absolute' && canvas.style.zIndex === '-1')) {
              canvas.width = 1;
              canvas.height = 1;
              canvas.remove();
            }
          });
        }, 150); // Delay ensures ACS has time to finish stopEffects()
      }
    } catch (error) {
      console.error("Error while toggling blur effect:", error);
    }
  };
  blurEffect();
}, [videoEffectsFeatureApi, toggleStates.blurBackground]);

It delays cleanup slightly to give stopEffects() time to finish.
It manually releases the WebGL context using WEBGL_lose_context.
It looks for canvas elements using fallback style checks (in case data-effect-layer isn’t present).

Suresh Chikkam 1,100 Reputation points Microsoft External Staff

2025-04-09T06:23:07.0666667+00:00

Hi Gautam Goklani,

Following up to see if the above comment was helpful. If this answers your query, do click on thumbsup and Yes, if you have any further query do let us know.
Gautam Goklani 0 Reputation points

2025-04-09T06:50:50.96+00:00

Hello @Suresh Chikkam ,

The following code is working for removing canvas in mac but when I stop effect once and then I start it again blur effect stopped working at all.

Suresh Chikkam 1,100 Microsoft External Staff

Gautam Goklani, This happens because ACS internally expects that canvas/WebGL context to still be available when you restart the effect.

What worked for me is to avoid removing the canvas completely. Instead, just hide it and shrink it so it stops rendering and doesn't take up resources, but it's still in the DOM for ACS to reuse when the blur effect is toggled back on.

Updated cleanup logic:

useEffect(() => {
  const blurEffect = async () => {
    try {
      if (toggleStates.blurBackground && videoEffectsFeatureApi) {
        await videoEffectsFeatureApi.startEffects(effect);
      } else {
        await videoEffectsFeatureApi?.stopEffects();

        setTimeout(() => {
          const gallery = document.getElementById('video-gallery-container') || document.body;

          const canvases = gallery.querySelectorAll('canvas');
          canvases.forEach((canvas) => {
            const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
            if (gl) {
              const ext = gl.getExtension('WEBGL_lose_context');
              ext?.loseContext(); // Optional: helps with GPU memory
            }

            // Instead of removing the canvas, hide it and shrink it
            if (canvas.dataset.effectLayer !== undefined ||
                (canvas.style.position === 'absolute' && canvas.style.zIndex === '-1')) {
              canvas.width = 1;
              canvas.height = 1;
              canvas.style.display = 'none'; // Keeps canvas in DOM so blur can restart later
            }
          });
        }, 150);
      }
    } catch (err) {
      console.error("Error toggling blur effect:", err);
    }
  };

  blurEffect();
}, [videoEffectsFeatureApi, toggleStates.blurBackground]);

Gautam Goklani 0 Reputation points

2025-04-10T09:28:16.8033333+00:00

Hello @Suresh Chikkam ,

The following code is not even working for removing canvas in mac and when I stop effect once and then I start it again blur effect stopped working at all over that on the next screen where I connect my call my video is hidden fully from Video Gallery.

1 answer

Your answer

Prabhavathi Manchala 815 Reputation points Microsoft External Staff

2025-04-02T20:07:58.0866667+00:00

Hi Gautam Goklani,

When your React app applies a blur effect in Safari on Mac, it creates an extra layer <canvas> element that doesn’t get removed properly when the effect is turned off. This happens because Safari handles blurring differently than Chrome or Edge, which can lead to memory issues over time.

From the code, the blur effect starts with videoEffectsFeatureApi.startEffects(effect) and stops with videoEffectsFeatureApi.stopEffects(), but in Safari, a <canvas> element may still remain after stopping the effect. To make sure this extra <canvas> is properly removed in Safari.

Please try the updated code below.

useEffect(() => { const blurEffect = async () => { try { if (toggleStates.blurBackground && videoEffectsFeatureApi) { videoEffectsFeatureApi.startEffects(effect); } else { videoEffectsFeatureApi?.stopEffects(); // Ensure Safari cleans up the extra canvas setTimeout(() => { document.querySelectorAll('canvas').forEach(canvas => { if (canvas.style.position === 'absolute' && canvas.style.zIndex === '-1') { canvas.remove(); } }); }, 100); // Delay to ensure stopEffects completes first } } catch (error) { console.error("Error while Applying Blur Background Effect", error); } }; blurEffect(); }, [videoEffectsFeatureApi, toggleStates.blurBackground]);
Suresh Chikkam 1,100 Reputation points Microsoft External Staff

2025-04-07T09:55:27.5133333+00:00

Hi Gautam Goklani,

Safari holds onto the <canvas> element created by the ACS video effects, especially if it’s using WebGL. Just removing the canvas from the DOM isn’t always enough because the WebGL context can still consume memory.

Updated Code:

useEffect(() => { const blurEffect = async () => { try { if (toggleStates.blurBackground && videoEffectsFeatureApi) { await videoEffectsFeatureApi.startEffects(effect); } else { await videoEffectsFeatureApi?.stopEffects(); // Safari-specific cleanup after a slight delay setTimeout(() => { const galleryElement = document.getElementById('video-gallery-container') || document.body; const canvases = galleryElement.querySelectorAll('canvas'); canvases.forEach((canvas) => { const gl = canvas.getContext('webgl') || canvas.getContext('webgl2'); if (gl) { const ext = gl.getExtension('WEBGL_lose_context'); if (ext) { ext.loseContext(); // Release GPU memory in Safari } } // Additional filters for Safari canvas (style-based or data attributes) if (canvas.dataset.effectLayer !== undefined || (canvas.style.position === 'absolute' && canvas.style.zIndex === '-1')) { canvas.width = 1; canvas.height = 1; canvas.remove(); } }); }, 150); // Delay ensures ACS has time to finish stopEffects() } } catch (error) { console.error("Error while toggling blur effect:", error); } }; blurEffect(); }, [videoEffectsFeatureApi, toggleStates.blurBackground]);

It delays cleanup slightly to give stopEffects() time to finish.

It manually releases the WebGL context using WEBGL_lose_context.

It looks for canvas elements using fallback style checks (in case data-effect-layer isn’t present).
Suresh Chikkam 1,100 Reputation points Microsoft External Staff

2025-04-09T06:23:07.0666667+00:00

Hi Gautam Goklani,

Following up to see if the above comment was helpful. If this answers your query, do click on thumbsup and Yes, if you have any further query do let us know.
Gautam Goklani 0 Reputation points

2025-04-09T06:50:50.96+00:00

Hello @Suresh Chikkam ,

The following code is working for removing canvas in mac but when I stop effect once and then I start it again blur effect stopped working at all.
Suresh Chikkam 1,100 Reputation points Microsoft External Staff

2025-04-09T08:50:35.4233333+00:00

Gautam Goklani, This happens because ACS internally expects that canvas/WebGL context to still be available when you restart the effect.

What worked for me is to avoid removing the canvas completely. Instead, just hide it and shrink it so it stops rendering and doesn't take up resources, but it's still in the DOM for ACS to reuse when the blur effect is toggled back on.

Updated cleanup logic:

useEffect(() => { const blurEffect = async () => { try { if (toggleStates.blurBackground && videoEffectsFeatureApi) { await videoEffectsFeatureApi.startEffects(effect); } else { await videoEffectsFeatureApi?.stopEffects(); setTimeout(() => { const gallery = document.getElementById('video-gallery-container') || document.body; const canvases = gallery.querySelectorAll('canvas'); canvases.forEach((canvas) => { const gl = canvas.getContext('webgl') || canvas.getContext('webgl2'); if (gl) { const ext = gl.getExtension('WEBGL_lose_context'); ext?.loseContext(); // Optional: helps with GPU memory } // Instead of removing the canvas, hide it and shrink it if (canvas.dataset.effectLayer !== undefined || (canvas.style.position === 'absolute' && canvas.style.zIndex === '-1')) { canvas.width = 1; canvas.height = 1; canvas.style.display = 'none'; // Keeps canvas in DOM so blur can restart later } }); }, 150); } } catch (err) { console.error("Error toggling blur effect:", err); } }; blurEffect(); }, [videoEffectsFeatureApi, toggleStates.blurBackground]);
Gautam Goklani 0 Reputation points

2025-04-10T09:28:16.8033333+00:00

Hello @Suresh Chikkam ,

The following code is not even working for removing canvas in mac and when I stop effect once and then I start it again blur effect stopped working at all over that on the next screen where I connect my call my video is hidden fully from Video Gallery.

Answer 1

Gautam Goklani 0

Hello @Prabhavathi Manchala ,

As I mentioned before, "Efforts to programmatically remove the canvas have been unsuccessful". The issue arises because the canvas is generated within the Azure Video Gallery, which I am unable to remove.

Prabhavathi Manchala 815 Microsoft External Staff

Hi Gautam Goklani,

Thanks for sharing more details. The issue occurs because the blur effect's canvas is generated within the Azure Video Gallery, making it difficult to remove programmatically.

Please try with updated solution that properly cleans up extra <canvas> elements in Safari.

useEffect(() => {
  const blurEffect = async () => {
    try {
      if (toggleStates.blurBackground && videoEffectsFeatureApi) {
        await videoEffectsFeatureApi.startEffects(effect);
      } else {
        // Force full cleanup cycle
        await videoEffectsFeatureApi?.stopEffects();
        
        // Safari-specific canvas cleanup
        requestAnimationFrame(() => {
          const galleryElement = document.getElementById('video-gallery-container');
          const canvases = galleryElement?.querySelectorAll('canvas[data-effect-layer]');
          canvases?.forEach(canvas => {
            canvas.width = 1;  
            canvas.height = 1;
            canvas.remove();
          });
        });
      }
    } catch (error) {
      console.error("Effect error:", error);
    }
  };
  blurEffect();
}, [videoEffectsFeatureApi, toggleStates.blurBackground]);

Gautam Goklani 0 Reputation points

2025-04-04T07:14:21.45+00:00

Hi @Prabhavathi Manchala ,

I made the changes to the code as you suggested still not able to remove canvas after stopEffects is executed.

Share via

Issues with Removing Blur Effect Canvas in Mac Safari

1 answer

Your answer