CODEWITHSUNDEEP
htmlcssfirefoxlinear-gradients
Inveth
Inveth

Reputation: 141

linear-gradient rendering issue firefox

I'm trying to draw several grids of various sizes but I'm having an issue with Firefox - linear-gradient is breaking up for me in many places.

It's working all fine on Google Chrome with any units provided (px/mm/%/rounded/float) but it's doing some funny stuff on Firefox. I've tried using different units/rounding/prefixed/3d hacks but none of this is working.

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

Upvotes: 1

Views: 228

Answers (1)

Temani Afif
Temani Afif

Reputation: 272744

A repeating gradient should give better result but it's always tricky when it comes to small values like 1px with gradients

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>

you can also consider an SVG here (adjust the viewBox, width and height or the rect until you get a good result)

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>

Also like below with only 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>

Upvotes: 1

Related Questions