Как скрыть содержимое холста от родительских закругленных углов в любом веб-комплекте для Mac?

У меня есть родительdiv с закругленными углами, который содержитcanvas:

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

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

Холст отображает красный прямоугольник, который выходит за пределы родительского элемента. Как и ожидалось, это то, что я получаю во всех браузерах:

enter image description here

The problem:

Однако для браузеров webkit, работающих в Mac OS Lion (я тестировал Safari 5.1.5 и Chrome 19), холст все еще виден в закругленных углах:

enter image description here

Интересно, что эта проблема, кажется, возникает только тогда, когда внутренний элементcanvas, Для любого другого дочернего элемента содержимое правильно скрыто.

Одним из обходных путей было бы применить те же закругленные углы к самому холсту, но, к сожалению, это невозможно, поскольку мне нужно анимировать относительное положение холста.

Другой обходной путь, который должен работать, - перерисовать холст в обрезанной области, которая напоминает форму закругленных углов, но я бы предпочел более чистое решение CSS3.

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

EDIT: Проблема также происходит в Chrome на Win7

jsFiddle здесь

 Nathan Ryan16 мая 2012 г., 15:35
Подтвердили, что такая же ошибка существует в Chrome на Mac
 Jose Rui Santos17 мая 2012 г., 07:45
@ NathanD.Ryan Спасибо за указание на это. Я изменил вопрос, чтобы включить также Chrome
 Robin Whittleton16 мая 2012 г., 14:07
Нет конкретного ответа (хотя я пробовал несколько кусочков), но это выглядит как проявлениеbugs.webkit.org/show_bug.cgi?id=68196

Ответы на вопрос(7)

Я нашел ответ на сафари. Добавьте маску webkit с одним пикселем png к родителю, и отсечение переполненных частей будет отображаться нормально.

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Образец JsFiddle

Вот код, который нужно добавить в CSS:

 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

HTML Source Code

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

Css Source Code

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

Javascript Source Code

var $canvas = $("canvas");

if ($canvas[0].getContext) {
    var context = $canvas[0].getContext('2d');
    context.fillStyle = 'red';
    context.fillRect(10, 10, 300, 60);
}

Note : This Need's Jquery

Пример : http://jsfiddle.net/PJqXY/12/

 Jose Rui Santos09 сент. 2012 г., 09:43
Я пробовал это решение раньше, но, к сожалению, оно не работает для Safari 5.1.7 Win7. Недостатком использования масок является зависимость от границы-радиуса. Если я изменю border-radius, понадобится новая маска изображения. В любом случае, я дал вам +1 за ваши усилия и за создание кодированного изображения base64, которое сохраняет дополнительный HTTP-запрос.

Холст должен использовать значение ширины / высоты? Если вы устанавливаете высоту холста в html на меньшее значение или даже удаляете все значения вместе, оно корректно обрезается (проверено только в Chrome).

http://jsfiddle.net/LwZ6v/

 07 июн. 2012 г., 11:18
Это также не имеет большого смысла для меня. Если это сработалоheight <= 140pxЭто высота - 10 пикселей поля красного холста, я мог понять ... но откуда он взял 219 пикселей, я понятия не имею.
 Jose Rui Santos07 июн. 2012 г., 11:11
+1 Это отличный обходной путь, который устраняет проблему в Chrome и Safari! Большое спасибо!! Однако не ясно, почему работает дляheight & lt; = 219 пикселей, но не работает для значений & gt; = 220 пикселей (при условииwidth остается неизменным до 300px)
Решение Вопроса

Ошибка все еще существует (11/2015), но еще один обходной путь - добавитьposition: relative; кoverflow:hidden; элемент.

 Jose Rui Santos05 нояб. 2015 г., 11:02
Спасибо! Кажетсяposition relative теперь работает для последних сборок. Я помню, как делал это в 2012 году безуспешно.
 05 дек. 2015 г., 15:53
Я должен был также дать ему z-index, но да, это работало для меня.

Здесь приведен пример в Chrome и Safari. Все еще глючит.

Sample

Проблема 137818: не поддерживается большой холст, содержащий div-radius

Я решил это с помощью тега CSS для родительского div, чтобы:

transform: translate3d(0,0,0);

работает на текущей версии Chrome 36.0.1985.143 м

jsfiddle.net/PJqXY/38/

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
    transform: translate3d(0,0,0);
}
 01 нояб. 2018 г., 13:02
Работал для меня в Safari 12. Спасибо, @Dowai!
 13 окт. 2015 г., 16:14
Для меня это не работает в Safari 8. Мне пришлось использовать ответ -webkit-mask ниже.
 09 нояб. 2014 г., 20:44
Это действительно легкий обходной путь, спасибо!

Вот что я узнал:

В элементе холста, когда умножениеwidth отheight равно 66000 или более, холст игнорирует свойство переполнения родительского элемента.

Например, следующий сбой, потому что 300 * 220 = 66000

<canvas width="300" height="220"></canvas>

Этот работает нормально:

<canvas width="300" height="219"></canvas>

Я нашел этосообщение об ошибке после поиска в Google для «холста 66000». Это не связано с переполнением, но я уверен, что это та же ошибка.

Thanks for Jeemusu for pointing me in the right direction.

 Jose Rui Santos15 мая 2013 г., 08:51
@lazd Вы правы. Чтобы быть более точным, эта проблема возникает, когда ширина * высота & gt; 2 ^ 16
 14 мая 2013 г., 22:12
Попробуйте использовать холст размером 256x256 (успех), затем попробуйте 256x257 (сбой), это означает, что ограничение подозрительно близко к 65,536 или 2 ^ 16 пикселей.
 Jose Rui Santos15 мая 2013 г., 09:02
Ну, то, что я сказал ранее, не совсем правильно (ширина * высота & gt; 2 ^ 16), но что предел подозрительно близок 2 ^ 16

Ваш ответ на вопрос