Firefox: глюк у conic-gradient. Что происходит?

Question

Обнаружил странную историю при использовании conic-gradient в Firefox. В Chrome проблемы нет. Скриншоты прилагаю. Есть идеи как можно пофиксить?

Codepen для упражнений - https://codepen.io/aliencash/pen/LYwajjE?editors=0100

html {
    background-image:
        conic-gradient(
            #080719,
            #080719 90deg,
            #6965f6 270deg,
            #080719 270deg
        ),
        conic-gradient(
            #080719, 
            #080719 90deg, 
            #6965f6 90deg, 
            #080719 270deg
        );
    background-position: 100% center, 0 center;
    background-size: 50% 100%, 50% 100%;
    background-repeat: no-repeat;
    min-height: 100dvh;
}

Answer 1

Пример из вопроса можно упростить до такого:

html {
  height: 100%;

  background-image:
    conic-gradient(
      #080719 0turn, 
      #080719 .25turn,
      #6965f6 .25turn, 
      #080719 .75turn
    );
}

body {
  margin: 0;
  background: transparent;
}

Фиксится добавлением ещё одной точки:

html {
  height: 100%;

  background-image:
    conic-gradient(
      #080719 0turn, 
      #080719 .25turn,
      #6965f6 .25turn, 
      #080719 .75turn,
      #080719 1turn
    );
}

body {
  margin: 0;
  background: transparent;
}

Соответственно код из вопроса полностью:

html {
  background-image:
    conic-gradient(
      #080719 0turn, 
      #080719 .25turn,
      #6965f6 .75turn,
      #080719 .75turn,
      #080719 1turn
    ),
    conic-gradient(
      #080719 0turn, 
      #080719 .25turn,
      #6965f6 .25turn, 
      #080719 .75turn,
      #080719 1turn
    );

  background-position: 100% center, 0 center;
  background-size: 50% 100%, 50% 100%;
  background-repeat: no-repeat;
  min-height: 100dvh;
}

А вообще, правильнее было бы делать градиенты в прозрачный, а #080719 использовать как цветовой фон:

html {
  background-image:
    conic-gradient(
      transparent 0turn, 
      transparent .25turn,
      #6965f6 .75turn,
      transparent .75turn
    ),
    conic-gradient(
      transparent 0turn, 
      transparent .25turn,
      #6965f6 .25turn, 
      transparent .75turn,
      transparent 1turn
    );
  background-color: #080719;
  background-position: 100% center, 0 center;
  background-size: 50% 100%, 50% 100%;
  background-repeat: no-repeat;
  min-height: 100dvh;
}

UPDATE: Теперь в FF хорошо всегда, а вот в хроме хорошо в мелком варианте, но при разворачивании на всю страницу немного едет (впрочем, код из вопроса ведёт себя так же):

БЛОГ НА HUSL

Firefox: глюк у conic-gradient. Что происходит?

Ответы (1 шт):