CSS3 linear gradient error in Google Chrome

Question

I'm running this code on an element I have that essentially results in one bevelled corner in the bottom right (to look like a vintage photo essentially).

The code works fine in Firefox and Safari but in Chrome I'm seeing a strange see-thru line striking vertically through the middle (see below).

Code taken from this tutorial: click here

Even stranger is the fact it only occurs on some of the elements present.

Here is the CSS3 code in its current form:

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 here! http://jsfiddle.net/8wzk42ep/

Answer 1

You can use the following solution:

 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> 

Explanation:
I think it is a bug on Google Chrome or the way how Google Chrome truncate the dimensions. If you resize the box to a smaller size, a horizontal line appears. With this simple solution you can avoid both lines (vertical and horizontal).

You only need to replace background-size: 50% 50%; with background-size: 51% 51%; .