CSS / HTML шаблон градиентной заливки имеет ошибку Firefox - PullRequest
Новая
       81

CSS / HTML шаблон градиентной заливки имеет ошибку Firefox

0 голосов
/ 18 марта 2020

Ниже приведен минимальный (i sh) пример, в котором клетчатый шаблон градиентной заливки выглядит глючно в Firefox (версия 74), т. Е. Он не идеален по пикселям. Есть линейные артефакты. Почему это? Это нормально? Есть ли какое-то исправление, кроме использования изображения для фона? 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />
    <style>
        .r{width:20px;height:20px;background:white;float:left;}
        .w{overflow:hidden;}
        #p75{
            width:80px;
            height:20px;
            background-position:0px 0px,10px 10px;
            background-size:20px 20px;
            background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc 100%),
                linear-gradient(45deg,#ccc 25%,white 25%,white 75%,#ccc 75%,#ccc 100%);
            float:left;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="r">0</div>
        <div id="p75"></div>
    </div>
</body>

Ответы [ 2 ]

2 голосов
/ 18 марта 2020

Вращающиеся градиенты всегда имели эту проблему, чтобы узнать больше об этом вопрос

Один из способов решения этой проблемы - вообще не использовать углы и использовать повторяющиеся градиенты. 

html {
  height: 100%;
  background: 
  repeating-linear-gradient(90deg, #fff 0px 10px, transparent 10px 20px), 
  repeating-linear-gradient(0deg, #000 0px 10px, #fff 10px 20px);
  background-blend-mode: difference;
}

Редактировать: благодаря @Temani Afif без повторяющегося градиента. 

html {
  height: 100%;
  background: 
    linear-gradient(90deg, #fff 50%, transparent 0) 0 0/20px 100%, 
    linear-gradient(0deg,  #000 50%, #fff        0) 0 0/100% 20px;
  background-blend-mode: difference;
}
1 голос
/ 18 марта 2020

Вы можете перекрыть их чуть-чуть, здесь я добавил 0,1% к настройке пуска / остановки цвета, chrome используйте для этого. 

  .r {
  width: 20px;
  height: 20px;
  background: white;
  float: left;
}

.w {
  overflow: hidden;
}

#p75,
.p75 {
  width: 80px;
  height: 20px;
  background-position: 0px 0px, 10px 10px;
  background-size: 20px 20px;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25.1%, transparent 75%, #ccc 75.1%, #ccc 100%), linear-gradient(45deg, #ccc 25%, white 25.1%, white 75%, #ccc 75.1%, #ccc 100%);
  float: left;
}

.p75 {
margin:0 1em 1em;
  height: 200px;
  width:100%;

  background-size: 19px 19px;
<div class="w">
  <div class="r">0</div>
  <div id="p75"></div>
</div>
<p>or decrease background-size of 1px</p>

<div class="p75"></div>

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

div {
  --bgsize: 40;
  --sq1: 0 0;
  --sq2: calc(var(--bgsize) / 2 * 1px)  calc(var(--bgsize) / 2 * 1px);
  --sq3: var(--sq2);
  --sq4: calc(var(--bgsize) * 1px ) 0px;
}

#a20:checked ~ div { --bgsize: 20; }
#a50:checked ~ div { --bgsize: 50; }
#a150:checked~ div { --bgsize: 150;}
#a100:checked~ div { --bgsize: 100;}
div { 

  height:200px;  
  background:
  linear-gradient(45deg,  gray 25% , transparent 26%),
  linear-gradient(225deg, gray 25% , transparent 26%),
  linear-gradient(45deg,  gray 25% , transparent 26%),
  linear-gradient(225deg, gray 25% , transparent 26%) 
  ;
  background-position: 
  var(--sq1) , 
  var(--sq2) , 
  var(--sq3) , 
  var(--sq4);
  background-size: calc(var(--bgsize) * 1px)  calc(var(--bgsize) * 1px );
}
reset bg-size:<br>
<label for=a20>20px</label><input  type=radio  name=test  id=a20>
<label for=a100>100px</label><input type=radio  name=test  id=a100>
<label for=a150>150px</label><input  type=radio  name=test  id=a150>
<div></div>

демо с возможностью сброса --bgsize и цветом https://codepen.io/gc-nomade/pen/GRJGXwv

...