Strange lines safari 6 gradients

Question

I'm trying to make gradients to the block.

Code:

a {
      display: inline-block;
      box-sizing: border-box;
      width: 330px;
      height: 160px
      background: -moz-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);
      background: -webkit-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);
      background: linear-gradient(to bottom, #fdfdfd 0%,#fcfcfc 100%);
}

It works fine in chrome 27, ff 22, but in safari 6 I have strange lines in the middle.

I know, that safari supports only -webkit-linear-gradient, but it works strange for me.

Also find -webkit-mask-image, but not sure, that it will help.

Fiddle

Any ideas?

Answer 1

Safari and older versions of Chrome have problems displaying gradients with very similar colors, I'd suggest to switch to SVG gradients. You gain IE 9 support in the process. The syntax is not very nice, unfortunately:

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkRGREZEIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkNGQ0ZDIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNzYpIiAvPgo8L3N2Zz4=);

http://jsfiddle.net/82D7g/

You can use Microsoft's SVG gradient generator if you want to tweak the gradient: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/