Ошибка CSS3 линейного градиента в Google Chrome

Question

Я использую этот код для элемента, который у меня есть, что по сути приводит к одному скошенному углу в правом нижнем углу (чтобы выглядеть как старинная фотография по существу).

Код прекрасно работает в Firefox и Safari, но в Chrome я вижу странную линию see-thru, вертикально проходящую через середину (см. Ниже).

код взят из этого урока: click here

Даже более странным является тот факт, что происходит только на некоторых из присутствующих элементов.

Вот код CSS3 в его нынешнем виде:

padding:     10px; 
background:     #FFF; 
background: 
    linear-gradient(135deg, transparent 0px, #FFF 0px) top left, 
    linear-gradient(225deg, transparent 0px, #FFF 0px) top right, 
    linear-gradient(315deg, transparent 10px, #FFF 0px) bottom right, 
    linear-gradient(45deg, transparent 0px, #FFF 0px) bottom left; 

background-size: 50% 50%; 
background-repeat: no-repeat; 

JSFiddle здесь! http://jsfiddle.net/8wzk42ep/

Answer 1

Вы можете использовать следующее решение:

html, body { 
 
    background-color:#000; 
 
} 
 
div.box { 
 
    padding:10px; 
 
    background:#fff; 
 
    background: 
 
    linear-gradient(135deg, transparent 0px, #fff 0px) top left, 
 
    linear-gradient(225deg, transparent 0px, #fff 0px) top right, 
 
    linear-gradient(315deg, transparent 10px, #fff 0px) bottom right, 
 
    linear-gradient(45deg, transparent 0px, #fff 0px) bottom left; 
 
    background-size:51% 51%; /** changed to 51% */ 
 
    background-repeat:no-repeat; 
 
}

<div class="box"> 
 
    <h1> Hello there! </h1> 
 
</div>

Объяснение:
Я думаю, что это ошибка в Google Chrome или способ, как Google Chrome укоротить размеры. Если вы измените размер окна на меньший размер, появится горизонтальная линия. С помощью этого простого решения вы можете обойти обе линии (вертикальные и горизонтальные).

Нужно только заменить background-size: 50% 50%; на background-size: 51% 51%;.