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

7

У меня есть родитель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 здесь

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

Ваш Ответ

7   ответов
2

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

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

Образец JsFiddle

6

Вот код, который нужно добавить в 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/

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

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

http://jsfiddle.net/LwZ6v/

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

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

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

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

Sample

6

Проблема 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);
}
Для меня это не работает в Safari 8. Мне пришлось использовать ответ -webkit-mask ниже.
Это действительно легкий обходной путь, спасибо!
Работал для меня в Safari 12. Спасибо, @Dowai!
4

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

В элементе холста, когда умножение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.

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

Похожие вопросы