Chrome/WebKit создает сплошную полосу при использовании фона, радиуса границы и верхней/нижней границ.

Google Chrome работает с ошибками, используя радиус границы, цвет фона и верхнюю часть. и нижние границы. Вот доказательства и код для воспроизведения:

http://jsfiddle.net/6ADtd/4/

​

div {
  background:blue;
  border-top:10px solid red;
  border-bottom:10px solid red;
  border-radius:20px 20px 0 0;
  height:100px;
  /*
  border-right:1px solid transparent;
  */
}

border-right:1px solid Transparent;— это трюк, предложенный в комментариях, который сделал помогите удалить ненужную сплошную среднюю полосу, но когда вы изменяете размерокна/браузера - она ​​снова появляется. Это как-то связано с близостью элемента к краю окна браузера, я не совсем понимаю. Вы должны изменить размер, а затем навести курсор на элемент иногда. ​ Видео с моего рабочего стола:

• http://www.screenr.com/6wU8(без рамки справа)
• http://www.screenr.com/NVU8(с границей справа )

Я пробовал префиксы -webkit-для нескольких свойств и не смог это исправить.

Сначала я опубликовал это, потому что мне нужно было быстро исправить определенный веб-сайт, но теперь я замечаю, что он появляется на нескольких сайтах, и я определил причину этого. Это то, что я получаю за то, что не тестировал ничего, кроме Firefox. Вероятно, это ошибка, и я должен сообщить об этом, но тем временем я все еще нуждаюсь в исправлении.

Идеальным решением является использование CSS, поэтому я могу написать один или два селектора в файле CSS для исправления вместо того, чтобы копаться в файлах шаблонов и в базе данных, чтобы применить div-wrap или другие исправления разметки. Кто-нибудь знает какие-нибудь хитрости, чтобы избавиться от этой ошибки?