Почему CSS радиальные градиенты не работают в Edge? - PullRequest
Новая
       55

Почему CSS радиальные градиенты не работают в Edge?

1 голос
/ 26 апреля 2020

Я получил следующее решение для диагональных линий сканирования из ответа на мой предыдущий вопрос: 

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

Решение отлично работает для воспроизведения желаемого эффекта в Chrome и Firefox, но не имеет никакого значения в Edge. Кажется, в этом нет никакого смысла, поскольку все версии Edge поддерживают градиенты.

Почему Edge не воспроизводит эти градиенты?

1 Ответ

2 голосов
/ 26 апреля 2020

Вот еще одна версия с conic-gradient(), которая должна работать в последней версии Edge в соответствии с: https://caniuse.com/#feat = css -coni c -градиентов 

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

Вы также можете рассматривать маленький SVG в качестве фона, и он будет работать везде: 

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