Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Inconsistent rounding = smooth scaling</h2> <p>A browser may round a certain value up sometimes and round the same value down at other times, so that on the whole rounding operations even out.</p> <p>The best example of this is when a page is scaled. Pages are usually scaled on mobile devices, but can also be scaled on a desktop browser if the user manually zooms the page. When a page is scaled, <code>px</code> values that used to be integers are now floating-point values. Likewise, <code>em</code> or <code>%</code> values that used to translate to an integer value in <code>px</code>, now translate as floating-point values.</p> <p>For the browser to be able to plot the size or position of elements in terms of screen pixels, it must round each value to an integer. The rounding only works well if it evens out on the whole.</p> <p><strong>Example</strong></p> <p>Let's say you have 3 floated divs that are <code>100px</code> each, for a combined width of <code>300px</code>. The page is scaled on a mobile device to be 2/3 the usual size. The combined width of the scaled divs should be <code>200px</code>.</p> <p>If the (roughly) <code>66.7px</code> of each scaled div is rounded up, each one will be <code>67px</code>, which adds up to <code>201px</code> (1 too many). If each div is rounded down, each will be <code>66px</code>, which adds up to <code>198px</code> (2 too few). The only way to have the sizes add up to <code>200px</code> is if the rounding is inconsistent (rounding two of them up, rounding the other one down).</p> <p>When the scaling is applied to absolutely-positioned elements with both position and size values, or to elements with a background image taken from a sprite file, any unevenness in the rounding of the scaled elements can be very noticeable.</p> <p><strong>Browser support</strong></p> <p>The last time I checked, Firefox is the only browser that does an effective job of scaling pages, of evening out the rounded values the right way. Other browsers may do some amount of this (and hopefully are getting better at it), but have not done as well in the past.</p> <p>This approach -- that works so well for page scaling -- is probably the same type of behavior that you're encountering, though it may not be obvious at first glance why it's happening.</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