Databases
StackOverflow2013
Postsdbo
PORepeated background gradient misaligned by about 1 pixel
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORepeated background gradient misaligned by about 1 pixel
    text
    copied!<p><strong>Note:</strong> This site is only meant to work in the latest version of Google Chrome Stable Channel.</p> <p>Please see the site here : <a href="http://3.cnxical.appspot.com" rel="nofollow noreferrer">http://3.cnxical.appspot.com</a></p> <p><strong>Problem</strong></p> <p>One of the background images is a 10vmax by 10vmax responsive square, repeated to give the effect of 45 degree stripes. It is done using gradients.</p> <p>The current problem to which the question refers is a <strong><em>misalignment by about 1 pixel</em></strong> that persists across resizings, which should be able to be reproduced.</p> <p><img src="https://i.stack.imgur.com/5ltvH.png" alt="notice the stepping on the diagonals, and the 1 pixel corners protruding across color stops"></p> <p><strong>Question</strong></p> <p>How to get the result that the gradient square tiles, line up perfectly to that no "jutting corners" or "misaligned" blocks occur in the stripes? (working "hacks" are ok)</p> <p><strong>Relevant CSS Code</strong></p> <pre><code> body { background-image: -webkit-linear-gradient( bottom, rgba(158,158,158,0.7) 0%, rgba(5,5,5,0.7) 100% ), -webkit-linear-gradient( 45deg, rgba(0,255,0,0.5) 25%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.5) 50%, rgba(0,255,0,0.5) 50%, rgba(0,255,0,0.5) 75%, rgba(0,0,0,0.5) 75% ); background-size: 100% 100%, 10vmax 10vmax; background-repeat: no-repeat, repeat; } </code></pre> <p><strong>Hypothesis</strong></p> <p>This might be due to a round-off loss of precision, or due to the combination of % values with view based values. Or due to some mistake in the code.</p> <p><strong>What was tried so far</strong></p> <ul> <li>Changing the <code>background-size</code> values from view relative to pixel absolute, i.e. from <code>vmax</code> to <code>px</code>. <strong>Effect</strong>: Misalign persists.</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload