Annoyed With Content Shifting? Here’s The Fix

Have you ever made a website where everything was perfect but then you start reading and scrolling, suddenly the page goes back to the top and you lose your scrolling position? This is a common problem all web designers have to face especially when building something for a mobile experience.

The Problem

What happens is that each time the browser needs to recalculate positions or the geometrics of elements, the reflow takes place. New DOM elements get added to the screen, some images load or even a dimension or two of an element changes and that is all it takes to trigger the reflow.

Let me show you a few quick fix methods to deal with content shifting.

The Dirty Fix

This always works across all browsers but is not something you should be doing ever. Fixing the height and width of an image will cordon off the exact space for it when content loads so you won’t get any content shifting . Like I said, it is a dirty fix at best.

Intrinsic Ratios

Another term used for Intrinsic Ratio is called  padding-bottom. Basically, it is a value calculated as height/width * 100 or in other words simply divide the height of your asset by its width and find the percentage value.

To make things even more user friendly you can use a placeholder by giving a background to the wrapper such as background: #ddd url(camera-icon.svg) no-repeat center center;

This ways a reader understand that there is an image yet to be loaded at this junction and can either wait for the loading to finish or move ahead and read on.

Other Reasons For Content Shift

Another common reason for content-shift is the addition of widgets that are added afterwards through the use of Javascript. This is especially the case when any content is added to the page in Jquery or Javascript in the footer.

To get around the widget issue, you can always define a minimum height for the widget beforehand so there is some amount of space allocated for it.

Then there are web fonts that can cause a similar issue. The best practice when using web fonts is to use the Font Face Observer script, which you can read up more if you really need web fonts.

Leave a Reply

Your email address will not be published. Required fields are marked *