Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It's because of <strong>sub-pixel artifacts</strong>. </p> <p>It is used also constructively nowadays to smooth text. This is because the screen is composed of red, green and blue sub-pixels, disposed in a vertical orientation. Note that the actual order may differ on some screens.</p> <pre><code>rgb|rgb|rgb ---+---+--- rgb|rgb|rgb ---+---+--- rgb|rgb|rgb </code></pre> <p>This means that in the navigation bar you have a disposition like the following:</p> <pre><code>blue | red | blue ---+---+---+---+---+---+---+--- b| b| b|r |r |r | b| b ---+---+---+---+---+---+---+--- b| b| b|r |r |r | b| b ^ ^ | Artifact caused by sub-pixels being far away (darker line) | Artifact caused by vicinity of sub-pixels (lighter line) </code></pre> <p>I have also created an image illustrating the typical pixel disposition in an lcd screen (rgb):</p> <p><img src="https://i.stack.imgur.com/oNGg3.png" alt="Sub-Pixel artifacts"></p> <p>you can see how on the first <em>transition</em>, when changing blue to orange, there is a green subpixel followed by a blue and by a red one, which are <strong>relatively close</strong> to each other. Our eye <strong>perceives this as white</strong>.</p> <p>On the right (the second transition from orange to blue), shows a gap giving the illusion of a dark color.</p> <h2>A note on mobile devices</h2> <p>Since most webpages on mobile devices are usually <strong>scaled</strong>, this effect is far less noticeable (due to image resampling). Anouther aspect to consider is that the <strong>orientation of the screen</strong> can be changed, and thus possibly creating artifacts in different directions.</p> <p>If you are interested in how this effects are leveraged to render smooth text, you can continue reading the following article on wikipedia: <a href="http://en.wikipedia.org/wiki/Subpixel_rendering" rel="nofollow noreferrer">wikipedia</a> </p> <p>This is how screen work nowadays, nothing you can do about (without changing the design)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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