Что за артефакт у border-radius?

Question

[Антон Мудренок]

День добрый.

Тут отобразил проблему: https://codepen.io/just-a-training/pen/XNNgGW
У нас блок определенной ширины обрезается контейнером с рамкой. Самой рамки нет, но вот полоски в местах скругления имеют цвет.

Как избавится от этих полосок background цвета на рамке?
Это вообще возможно?)

upd: в контейнере происходит анимация, левый угол не всегда одного цвета, потому у него нельзя убирать радиус

Comments

[endorphin]

https://codepen.io/muz-toxa/pen/vYezyjM

Answer 1

[Максим Тимофеев]

если Вам нужен только правый нижний угол закруглить:
border-radius: 0 0 20px 0;
и не будет артефактов

Comments

[Антон Мудренок]

Максим Тимофеев нужны все. У меня сцена — это контейнер с border-radius и background. В сцене прыгают разные SVG-шки при анимации.

[Максим Тимофеев]

Антон Мудренок: Значит не тому элементу скруглили, такие артефакты бывают с углами, особенно при transform

[Максим Тимофеев]

Антон Мудренок: transform translate не так давно вошло в обиход и еще не все браузеры поддерживают, а у тех кто недавно внедрил еще бывают артефакты caniuse.com/#search=translate

[Максим Тимофеев]

Так что как вариант могу предположить, что border-radius и другие красивости надо кинуть в блок, который будет внутри элемента к которому применяется трансформирование

[Антон Мудренок]

Максим Тимофеев: если убрать transform ничего не поменяется. А какому элементу мне надо скруглять?

[Максим Тимофеев]

Антон Мудренок: думаю рядом с left должен быть right и им скруглять

[Максим Тимофеев]

Антон Мудренок: сложно сказать не понимая, что это будет

[Антон Мудренок]

Максим Тимофеев: left это просто элемент в контейнере, при этом не так важно какого он размера и в какой он позиции, у самого элемента форма может быть любая. Если добавить right - будет еще один элемент в контейнере.

[Антон Мудренок]

Максим Тимофеев: поправил пример, чтобы было понятней что будет

[Максим Тимофеев]

Антон Мудренок: https://codepen.io/wokster/pen/XNNeZE

[Антон Мудренок]

Максим Тимофеев: лол, они стали в 2 раза тоньше)
Гляньте на превью и что там происходит по бокам: codepen.io/just-a-training
На некоторых экранах такая фигня с рамками осталась)) С компом при некоторых разрешениях не видно, а если поресайзить то видно. Видать сам рендер хитрый и с артефактами.

[Максим Тимофеев]

Антон Мудренок: а если не перемещать, а расширять блок, который перекрывает белый фон и углы?

[Максим Тимофеев]

Антон Мудренок: Но мне кажется, что лучше для подобных вещей использовать canvas или svg

[Антон Мудренок]

Максим Тимофеев: в firefox, кстати, углы остались)) сам элемент SVG или нет не имеет значения, трансформ тоже не важно какой, translate самый дешевый.

Answer 2

[Константин Давыдов]

Так пойдёт? https://codepen.io/anon/pen/jVVgZj?editors=1100

Comments

[Антон Мудренок]

Константин Давыдов к сожалению это не исправило ошибку, хотя и сделало ее менее заметной (белая рамка стала в 2 раза тоньше). Откройте в firefox, там она все равно будет.

[Константин Давыдов]

Антон Мудренок: Вот же зараза, а в Хроме пропало. Серьёзный глюк. :(

[Константин Давыдов]

Антон Мудренок: Единственное что ещё могу предложить, это убрать overflow: hidden; Визуально всё выглядит также. Если это не критично конечно.

[Антон Мудренок]

Константин Давыдов: критично =( Я для этой демки думал как поправить: codepen.io/mudrenok/full/NbbJmz Правый нижний угол виден.

[Константин Давыдов]

Антон Мудренок: Эх, но я так понял, что если цвет фона и блока будут разными, то глюк пропадёт.

[Антон Мудренок]

Константин Давыдов: не, хотя и станет менее заметен. Это разработчики браузеров схалтурили. Они ввели, что можно делать border-radius без рамки, но сам процесс рендера не поменяли и просто сделали автоматическую рамку минимальной толщины. А если чето меньше 1px, то оно иногда отображается, иногда нет. А иногда отображается непонятным образом. Вот и артефакты.

border-radius рубит немного изображение в местах скругления делая его чуток размытым, размывает его с тем, что находится под элементом. Если под элементом белый цвет, будут белые рамки.

[Константин Давыдов]

Антон Мудренок: Понял. Была подобная проблема где-то год назад, но тогда просто попросил дизайнера перерисовать эту часть.
Думаю такие штуки, надо отправлять этим разработчикам, очень неприятный глюк.