Carousel gradient leaves 1px black line on inner edge in Safari

[egaertner]

The carousel gradient leaves 1px black line on inner edge. This seems to be Safari specific and introduced with v8.0 (I'm running MacOS 10.10.1). It is also browser window size dependent, as you grow and shrink the window you'll see this line flicker and come and go. The color of this line appears to follow the color of the opposite side of the gradient as well, so if I make the far end green, this 1px line will be green.

I am seeing it reproduce on a few public websites on the left gradient, and on the bootstrap examples page on the right gradient.

Examples:
http://www.sccmas.org/dayatfield.php

http://thecurlybaker.com

http://getbootstrap.com/javascript/#carousel

[peterblazejewicz]

I can't see this problem and can't repeat.

• Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25
  Retina/HiDPI 2.0

[egaertner]

Interesting. I've reproduced it on 3/3 machines, but none of them were retina. Just tested a retina MBP and it does not reproduce there.

Reproduces with the following:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

[peterblazejewicz]

so non-retina only 👍

[kellygrape]

Definitely non-retina. Tried it on a non-retina screen, and could reproduce.

Tried changing the widths of the gradient in the .carousel-control ruleset, and at widths from 1% to 14%, the line shows on the right-hand-side gradient (as in the last example photo in the original issue). At widths from 15% to 19%, the line is on the left-hand-side gradient, and at 20% the line is gone.

So, changing the width of the gradient to 20% would solve this edge case, but I wonder if there's another way to resolve without doing that.

[egaertner]

Your description doesn't exactly match what I'm observing. There must be some other system or page dependancies. Seems like some funky rounding error.

Width 1px - 8px: even px values cause left line, odd cause right line
Width 9px - 16px: odd px values cause left line, even cause right line
Width: 17px - 24px: even px values cause left line, odd cause right line
Width: 25px: line goes away
Width: > 25px: line returns

[cvrebert]

Filed upstream Safari/WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=139803

[brad]

Is there a workaround for this?

[cvrebert]

Nope, unless you get rid of the gradient entirely.
File a duplicate Radar problem (of http://openradar.appspot.com/19434933) at https://bugreport.apple.com if you want to help bring Apple's attention to the problem.

[cvrebert]

This has been fixed in WebKit Nightly as of r186963: http://wkbug.com/139803