2

I got the following solution for diagonal scanlines from an answer to my previous question:

html {
  height:100%;
  background:
    radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

The solution works perfectly to reproduce the desired effect in Chrome and Firefox, but doesn't make any difference in Edge. This doesn't seem to make any sense as all versions of Edge support gradients.

Why is Edge not reproducing these gradients?

Hashim Aziz
  • 4,074
  • 5
  • 38
  • 68

1 Answers1

2

Here is another version with conic-gradient() that should work on the last version of Edge according to: https://caniuse.com/#feat=css-conic-gradients

html {
  height:100%;
  /* fallback for firefox */
  background:
    radial-gradient(#000 0.5px,transparent 0.5px) 0   0   /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
    radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
  /**/
  background:
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 0   0  /3px 3px,
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 1px 1px/3px 3px,
    conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}

You can also consider a small SVG as background and it will work fine everywhere:

html {
  height:100%;
  background:
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 0   0  /3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 1px 1px/3px 3px,
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 2px 2px/3px 3px,
    url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    My bad, I assumed that I had the latest version of Edge being on Windows 10 but apparently it's now a standalone product that needs to be installed. I can confirm the conic-gradient solution works on Edge as well as Firefox and Chrome, although that still leaves all the other (more common) versions of Edge, so the SVG solution is still superior. – Hashim Aziz Apr 26 '20 at 22:13