repeating-linear-gradient is not rendering evenly in safari

user_8919670 0
Viewed 1129

I'm having problems with my background in Safari.

body {
  background-color: #161619;
  /* For browsers that do not support gradients */
  background-image: radial-gradient(rgba(240, 240, 255, .1), rgba(20, 20, 30, .1) 60%), repeating-linear-gradient(40deg, #222, #222, 3px, #252525 3px, #252525 6px);
}

All other browsers (incl. Chrome) give me a nice striped background: a nice striped background

But Safari (Version 11.0.1) made it soft stripes in different sizes: soft stripes in different sizes

So I tried prefixes – but safari doesn't use the right one. (I tried a colour-change)

body {
  background-color: #161619;
  /* For browsers that do not support gradients */
  background-image: -webkit-radial-gradient(rgba(240, 240, 255, .1), rgba(20, 20, 30, .1) 60%), -webkit-repeating-linear-gradient(40deg, #222, #222, 3px, #500000 3px, #500000 6px);
  background-image: -o-radial-gradient(rgba(240, 240, 255, .1), rgba(20, 20, 30, .1) 60%), -o-repeating-linear-gradient(40deg, #222, #222, 3px, #252525 3px, #252525 6px);
  background-image: radial-gradient(rgba(240, 240, 255, .1), rgba(20, 20, 30, .1) 60%), repeating-linear-gradient(40deg, #222, #222, 3px, #252525 3px, #252525 6px);
}

I've been trying a lot of stuff now. But nothing works.

Anyone any ideas?

linear-gradients gradient safari css
1 Answers

Webkit seems to have issues when rendering gradients at certain degrees and with low contrast. At times, the results are completely unpredictable.

Problem is exacerbated when these snippets are run in full screen.

45deg angle gives the best results.

Heavy contrast:

html {
 height: 100%;
 background: 
  repeating-linear-gradient(
   45deg, 
   #fff, /* heavy contrast */ 
   #fff 0.5em, 
   #252525 0.5em, 
   #252525 1em)
}

Lower contrast:

html {
 height: 100%;
 background: 
  repeating-linear-gradient(
   45deg, 
   #111, /* heavy contrast */ 
   #111 0.5em, 
   #252525 0.5em, 
   #252525 1em)
}

I also noted that the results are better when using responsive units, such as em used above. With pixels things get even more wonky.

Very low contrast with pixel units, 40deg angle:

html {
 height: 100%;
 background: 
  repeating-linear-gradient(
   40deg, 
   #111, 
   #111 3px, 
   #252525 3px, 
   #252525 6px)
}

Very low contrast with pixel units but larger size, 40deg angle:

html {
 height: 100%;
 background: 
  repeating-linear-gradient(
   30deg, 
   #222, /* heavy contrast */ 
   #222 20px, 
   #252525 20px, 
   #252525 40px)
}

user_2333370
Related