My<cod/>.net
Баг вебкита при отрисовке бордеров?
Просмотров: 296
Ответов: 3
Здравствуйте, никто не находил решения проблемы с неправильным накладыванием бордеров друг на друга в вебките?
То, о чем я говорю очень хорошо проявляется на полупрозрачных бордерах и показано на скриншоте.
Т.е. вебкит не совмещает граничащие бордеры, как все остальные браузеры, а накладывает их — один на другой.
Я перепробовал все доктайпы, перерыл весь гугл, как мне кажется, но ничего толкового не нашел. Надеюсь на коллективный хабраразум.
Можно смягчить эффект, если для разных сторон указать немного разные значения для цвета. Накладывание при полупрозрачных бордерах происходит только если они одного цвета. Поэтому если указать для всех 4-х сторон не сильно отличающиеся цвета (со значением прозрачности отличающимся на 0.01), накладывание будет не так заметно.
div {
margin:40px 0 0 40px;
border:30px solid;
border-color:rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.49) rgba(0, 0, 0, 0.51) rgba(0, 0, 0, 0.52);
width:500px;
height:500px;
background:#ddd;
padding:30px;
white-space:pre;
}
P.S. Про это есть несколько багов на https://bugs.webkit.org/ но все они открытые.
div {
margin:40px 0 0 40px;
border:30px solid;
border-color:rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.49) rgba(0, 0, 0, 0.51) rgba(0, 0, 0, 0.52);
width:500px;
height:500px;
background:#ddd;
padding:30px;
white-space:pre;
}