如何在任何适用于 Mac 的 webkit 中隐藏父圆角的画布内容?

问题描述

我有一个带有圆角的父 div，其中包含一个 canvas:

<canvas width="300px" height="300px"></canvas></div>#盒子 {宽度:150px；高度:150px；背景颜色:蓝色；边框半径:50px；溢出:隐藏；}

画布渲染了一个红色矩形，该矩形溢出父级.正如预期的那样，这是我在所有浏览器中得到的:

问题:

但是，对于在 Mac OS lion 中运行的 webkit 浏览器(我测试了 Safari 5.1.5 和 Chrome 19)，画布在圆角处仍然可见:

有趣的是，这个问题似乎只有在内部元素是 canvas 时才会发生.对于任何其他子元素，内容被正确隐藏.

一种解决方法是将相同的圆角应用到画布本身，但不幸的是这是不可能的，因为我需要为画布相对位置设置动画.

另一种可行的解决方法是在类似于圆角形状的剪切区域中重新绘制画布，但我更喜欢更简洁的 CSS3 解决方案.

那么，有人知道如何为 Mac 上的 Safari 和 Chrome 解决这个问题吗?

EDIT:Win7 上的 Chrome 也会出现问题

jsFiddle在这里

解决方案

Bug 仍然存在 (11/2015)，但另一种解决方法是将 position: relative; 添加到 溢出:hidden; 元素.

I have a parent div with rounded corners that contains a canvas:

<div id="box">
    <canvas width="300px" height="300px"></canvas>
</div>​

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
}​

The canvas renders a red rectangle that overflows the parent. As expected, this is what I get in all browsers:

The problem:

However, for webkit browsers running in Mac OS lion (I tested Safari 5.1.5 and Chrome 19), the canvas is still visible in the round corners:

Interestingly, this problem seems to happen only when the inner element is a canvas. For any other child element, the content is correctly hidden.

One workaround would be to apply the same rounded corners to the canvas itself, but unfortunately this is not possible, since I need to animate the canvas relative position.

Another workaround that should work, is to redraw the canvas in a clipped region that resembles the rounded corners shape, but I would prefer a cleaner CSS3 solution.

So, does one know how to fix this for Safari and Chrome on Mac?

EDIT: Problem also happens in Chrome on Win7

jsFiddle here

解决方案

Bug still exists (11/2015), but another workaround is to add position: relative; to the overflow:hidden; element.

这篇关于如何在任何适用于 Mac 的 webkit 中隐藏父圆角的画布内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！