css - grid lines - background-size limit when using linear-gradient? -

Is there any type of limit on Chromium / Google Chrome in background-size ?

See the Bela here:

< / P>

I am trying to apply gridlines of different intervals, it works at one point, but in this example when I run the previous 256px , linear gradient The second part disappears.

Example code:

  .grid-line div {background: linear-gradient (0deg, # 900 0, rgba (0,0,0,0) 1px, Rgba (0,0, 0,0) 1px, rgba (0,0,0,0) 100%), linear shield (0deg, #bbf 0, rgba (0,0,0,0,0) 1 PX, RGBA (0,0,0, 0) 1px, RGBA (0,0,0,0,0) 100%); Background-origin: padding-box; Background-clip: border-box; Status: Completed; Top: 0; Bottom: 0; Width: 100px; } ... grid-lines .fifth {background-size: 1px 320px, 1px 40px; Left: 600 pixels; }  

Q1: Why is this?

Q2: I can implement which workings / alternative methods can I use to achieve that effect (originally 320px < / Code> and 480px interval)

Bonus Q: Why does the dark red line appear for 160px columns?

The editor came on this while grid for a MIDI. I need vertical lines for bars, quarter notes and subdivisions which can change depending on the time sign.

Thanks for your observation, I tried to set the 2px setting for the bar marker that Chrome tries to proportionally (slightly) scale.

  .grid-line div {background: linear-gradient (0deg, # 900 0, transparent 2px), linear-gradient (0deg, #bbf0, rgba (0,0,0, 0) 1px, rgba (0,0,0,0) 1px, rgba (0,0,0,0) 100%); Background-origin: padding-box; Background-clip: border-box; Status: Completed; Top: 0; Bottom: 0; Width: 100px; }