CSS For Fast Scroll – No Lags!

Pure CSS (no JavaScript!) tricks to allow you a faster, more reactive page.

Lags while scrolling native pages
are caused by an overly complex styles (usually “zero css” or “normalize css”)
overriding the proper definitions.

Usually the BODY’s content will overflow freely into HTML,
the browser handles HTML content overflowing very fast,
but sub-elements (BODY and DIVs for example) very slow (best practice #1: content overflow)

Solution is to put this at the very end of you last-loading CSS file (or style tag)

 padding: 0px;
 margin:  0px;
 height: 100%;
 width:  100%;
  overflow:         visible;
  overflow:            auto;
  word-break:        normal;
  overflow-wrap: break-word;
  word-wrap:     break-word;

Here is an example using a page which handles a lot of content (images):
the images are all written with a size attribute, this helps to prevent visible jumps,
since all elements have pre-defined well-placed container, so if the actual content will be load later
(best practice #2: pre-define element’s size as attribute or in style).

In additional to the attributes height/width,
add css text, which will pre-define the size, even before the page HTML-content will be rendered and the attributes-parsed (this will help to prevent visible jumps).

To this I’m adding a pre-defined border/outline behavior.

Favoring speedy rendering using:

  text-rendering:         optimizeSpeed;
  font-feature-settings:  'c2sc' 0, 'calt' 0, 'case' 0, 'dlig' 0, 'fina' 0, 'frac' 0, 'hist' 0, 'hlig' 0, 'init' 0, 'isol' 0, 'kern' 0, 'liga' 0, 'lnum' 0, 'locl' 0, 'mark' 0, 'medi' 0, 'mkmk' 0, 'onum' 0, 'rlig' 0, 'smcp' 0, 'ss**' 0, 'subs' 0, 'sups' 0, 'swsh' 0, 'tnum' 0, 'zero' 0;

Disabling unneeded user-interaction such as drag and drop, select, resize, and zoom
along with removing scroll-“smoothness” effect which renders sub-pixels of “renderer-tile(s)”:

  user-select:            none;
  scroll-behavior:        auto;
  overflow-scrolling:     auto;
  resize:                 none;
  user-zoom:              none;
  user-drag:              none;

Touch interaction is limited to reduce 300ms of click delay (with support for older browsers)

  touch-action:           pan-x pan-y;
  touch-action:           manipulation;

Try to avoid using box-shadow. Yes, it looks nice but it will kill you rendering speed when scrolling down the page – if you have for example a lot of buttons that styled with this attribute, you can easily see your page scrolling get stuck (when you’ll get to display that part in your page).

prefer solid colors by name, rather than semi-transparent colors (rgba(0,0,0,.4) to lightgray)
you can use various “pixel-color detect tools” to find-out the hex value of the semi-transparent color and use a “near-color” to get roughly the same result with a fraction of the rendering effort.

avoid padding.

if you have some lags when scrolling over a bunch home-made buttons (a/span/div made to look into buttons with css)
and you can avoid padding, do it!
div with some content is better to be aligned using simple methods, by setting the font-size correctly to not push through the container true size (text- 20pt, container- 40ptx40pt) with text-align:center; and vertical-align:middle; will give much better result than having an additional padding, which increases the container’s true size and requires on-the-fly rendering (additional computation).

this provides a proper “content container” with no out-leakage
and (with the additional of viewport tag) remodeling to fit most of displays without any issue.

  display: inline-block;
  text-overflow: clip;
  text-align:       center;
  vertical-align:   middle;

Generic Hacks to complement the CSS part:

Reduce renderer attention to the BODY if possible,
in-favor of HTML (which is the real container anyway, a big hit is the overflow definition…)

<html tabindex="1" .....
   <head tabindex="-1"....

   <body tabindex="-1"....

this is optional but will remove some rendering bugs and lags,
and will allow smoother rendering.

To this you must add doctype: <!doctype html> at the top of the page,
and really ANY sort of viewport pre-definition in the HEAD part of the document:

<meta name="viewport"  content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui"/>

care to place minimal-ui at the very end since some browsers will not like it (is there for older Apple devices).

You can visit the page with your mobile device,
and to see how fast scrolling can really be.

There are some cases where you load up so much content (usually text..)
that some delays
If you host your HTML document on GitHub pages,
where you can’t really control caching using HEADERs manipulation (.htaccess)
use meta tag in HEAD part.

+Include STALE definition!

You can copy paste the one below and use it:

<meta http-equiv="Cache-Control"   content="public,max-age=1800,max-stale,stale-while-revalidate=86400,stale-if-error=259200" rem="max-age=30minutes"/>