проблема рендеринга линейного градиента firefox - PullRequest
Новая
       27

проблема рендеринга линейного градиента firefox

0 голосов
/ 16 июня 2020

Я пытаюсь нарисовать несколько сеток разного размера, но у меня проблема с Firefox - linear-gradient распадается во многих местах.

Он отлично работает в Google Chrome с любыми предоставленными единицами измерения (px / мм /% / Round / float), но делает некоторые забавные вещи на Firefox. Я пробовал использовать различные хаки единиц / округления / префикса / 3d, но ничего из этого не работает. 

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, transparent 1px);
  background-size: 5mm 5mm;
}
<div></div>

enter image description here

1 Ответ

1 голос
/ 16 июня 2020

Повторяющийся градиент должен давать лучший результат, но это всегда сложно, когда дело доходит до небольших значений, таких как 1px с градиентами 

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: 
    repeating-linear-gradient(to right,  black 0 1px, transparent 0 5mm),
    repeating-linear-gradient(to bottom, black 0 1px, transparent 0 5mm);
}
<div></div>

вы также можете рассмотреть здесь SVG (настройте viewBox, ширину и высоту или прямоугольник, пока не получите хороший результат) 

div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'> <rect x='0' y='0' width='1' height='100%' /> <rect x='0' y='0' width='100%' height='1'/></svg>")
    0 0/5mm 5mm;
}
<div></div>

Также, как показано ниже, только с SVG: 

svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect x='0' y='0' width='1' height='100%' /> 
      <rect x='0' y='0' width='100%' height='1'/>
    </pattern>
  </defs>
  <rect width="3000" height="3000" fill="url(#grid)" />
</svg>
...