提问人：Johnny Slack 提问时间：10/28/2023 更新时间：10/30/2023 访问量：42
Safari：带有模糊滤镜和剪辑路径的画布元素错误地显示模糊的边缘
Safari: Canvas elements with a blur filter and clip-path incorrectly show blurred edges
问：
我已经在 stackoverflow 上研究了关于边缘和模糊滤镜问题的类似问题 - 但这专门针对画布元素，我找不到解决方案。
如果我在带有 clip-path 的容器中有一个 canvas 元素并模糊了里面的 canvas 元素，则该元素的边缘在 Safari 中仍将模糊。预期的结果是 Chrome 如何处理这个问题，即具有锋利的边缘，因为它被 clip-path 掩盖了。
我还尝试将 canvas 元素包装在另一个 div 中并将模糊过滤器应用于该包装器，但这也产生了问题。如果我使用 img 元素而不是 canvas 元素，Safari 将按预期呈现锐利的边缘。
这里有一个简单的代码笔来解释这个问题。请比较 Safari（在我的情况下为 16.5.2）和 Chrome 中的结果以查看差异。
https://codepen.io/Johnny-Slack-the-bold/pen/RwvrRmq
The CSS:
.webgl-container {
clip-path: inset(100px 100px);
}
canvas {
filter: blur(30px);
}
答：
0赞
Kaiido
#1
我可以在 macOS Sonoma 14.0 上的 Safari TP 版本 181（Safari 17.4、WebKit 19618.1.3.1）上重现我刚刚在 https://bugs.webkit.org/show_bug.cgi?id=263862 上打开了一个问题
但是，我找不到合适的解决方法......除了在每一帧的 2D 上下文中绘制 WebGL 内容之外：
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xff0000);
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
const canvas = document.createElement("canvas");
canvas.width = innerWidth;
canvas.height = innerHeight;
const ctx = canvas.getContext("2d");
document.body.querySelector('.webgl-container').appendChild(canvas);
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 3;
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
ctx.drawImage(renderer.domElement, 0, 0);
}
animate();html, body {
margin: 0;
padding: 0;
}
.webgl-container {
clip-path: inset(100px 100px);
}
canvas {
filter: blur(30px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<div class="webgl-container">
</div>
评论