Weird horizontal line with gradient in retina Safari

Question

I have this strange horizontal line across the my gradient div. It is only showing in Safari and only on retina displays and I can't figure out why. Has anyone else had this problem?

HTML:

<div class="img-gradient2"></div>

CSS:

.img-gradient2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 26%, rgba(0,0,0,0.01) 27%, rgba(0,0,0,0.5) 68%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Chrome,Safari4+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}

Answer 1

I've run into the same bug. It appears to be triggered by a gradient background in Webkit on a retina display. I've reproduced it on a MBP and an iPad.

After a little testing, I've figured out a work around. Since the Webkit rendering engine appears to be painting a one pixel line of non-transparent background along the edge of the gradient, you can simply tell it to position the background one pixel up by tweaking the background-position-y. (For other folks reading this, if you are doing a side-to-side gradient rather than top-to-bottom, then change that to background-position-x.)

However, this will expose the underlying content by one pixel on the opposite side from the gradient, so you can change the absolute position of the gradient overlay by one.

background-position-y: -1px;
bottom: -1px;

Depending on your setup, changing the bottom (or top) might not produce the desired result depending on how the gradient interacts with the underlying content. Still, the background-position-y trick will remove the black line which might be better.

Full Code

.img-gradient2 {
    position: absolute;
    width: 100%;
    height: 100%;
    /** Workaround fix for Webkit black-line on retina displays **/
    background-position-y: -1px;
    bottom: -1px;
    /**/
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 26%, rgba(0,0,0,0.01) 27%, rgba(0,0,0,0.5) 68%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Chrome,Safari4+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}