如何隐藏画布内容从父的圆角在任何webkit的Mac？

问题描述

我有一个包含画布的圆角的父项 div ：

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:

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

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:

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

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.

另一个应该可行的解决方法是在类似圆角形状的剪裁区域中重绘画布，但我更喜欢使用更清晰的CSS3解决方案。

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.

那么，是否知道如何在Mac上修复Safari和Chrome？

：Win7上的Chrome也会出现问题

EDIT: Problem also happens in Chrome on Win7

推荐答案

错误仍然存​​在（11/2015），但另一个解决方法是添加 position：relative; 到 overflow：hidden; 元素。

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

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