Why don't CSS radial gradients work in Edge?

问题

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?

回答1:

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;
}

来源：https://stackoverflow.com/questions/61446595/why-dont-css-radial-gradients-work-in-edge

标签

html

css

cross-browser

microsoft-edge

radial-gradients