The Magic of the Infinite Scroller

Konstantin Dzuin16th of August, 2016 London CSS Meetup

Hi, I am…

Konstantin Dzuin

Mobile Web developer (html/css) Badoo, London, UK

html/css developer since 2002Badooer since 2013

Twitter: @kdzuin

3 CSS

developers

7 JS

developers

5 QA

engineers

Mobile Web Team

People NearbyWe have different ways in which we visualise users. People Nearby is a section

in our application where we display users you have bumped into, or just people nearby according to your location.

The Contact ListA list of all the connections made both existing and new chats, and matches.

Visitors, Favourites and more…

The Challenge

Over 320 million usersThe great number of users that are affected by our solutions. How to display all these users in a single long list?

Smooth UXSupporting Android 2.3+, iPhone and Windows phone devices.

Preserve the StateNavigating through the application (page-page-back)Rotating the device

Solutions on the MarketCurrently there are a lot of solutions to this on the market but none of them suited our needs. We wanted a balance between maintainability and the-best-technical-idea-ever!

Google / iScroll

Complexities of an infinite scroller demo

iScroll, smooth scrolling for the web demo

• Re-use DOM elements

• Layout is built by JavaScript

• Scrolling is native / Scrolling is controlled by JavaScript

The Technique

CSS: Google

.element

position: absolute; transform: translateY() transition: transform

all the elements are reused and repositioned using translation

.sentinel

position: absolute; transform: translateY() transition: transform

sentinel pixel is translated to the bottom + ‘page’ height to create new scrolling space for new elements

.runway should be empty and all inner elements moved to GPU processing

CSS: iScroll

.element

position: absolute; transform: translateY() transition: transform

all the elements are reused and repositioned using translation

.canvas

position: absolute; transform: translateY() transition: transform

• the whole canvas is translated • smooth and configurable perception

All good but complicated

+ 60 fps, Really smooth UX

+ Configurable scrolling perception (iScroll)

– Layout is built by JS, responsibility to maintain the relationships is on JS side

– Difficult to scale and re-use

Nothing But the Browser

• No re-use of DOM elements

• Layout is built by CSS

• Scrolling is native

The Technique

Simple but limited…

+ Layout is build by CSS

– Low performance

– Browser will eventually crash

Our Solution

The Technique

• Do not re-use DOM elements

• Hide elements outside the viewport

• Do trust the browser with scroll and layout

So, how do we hide the elements?

displaynone

visibilityhidden

Options

display: none

two extra blocks with calculated

heights before and after the content

calculation of box models before hiding, excluding them from rendering

visibility: hidden

blocks are still in the flow and occupy

their height

calculation of box models,keeping them rendered without effects

Who wins?

display: none

two extra blocks with calculated heights before and after the content

calculation of box models before hiding, excluding them from rendering

visibility: hidden

blocks are still in the flow and occupy their height

calculation of box models,keeping them rendered without effects

Who wins?

• No significant difference in performance

• No need to create and calculate extra elements somewhere

• Even works on slow devices

display: none

two extra blocks with calculated

heights before and after the content

calculation of box models before hiding, excluding them from rendering

visibility: hidden

blocks are still in the flow and occupy

their height

calculation of box models,keeping them rendered without effects

Let Us Compare

Video comparison Google iScroll Browser Badoo

Let’s change the design…

People Nearby

The Web and Mobile Web are grown up

We can trust the browser

We need to help the browser a bit

The less we reinvent under the browser’s hood – the easier the process of maintenance for the whole system

Just imagine that…

Questions?

Thank you!

https://twitter.com/BadooTech

https://github.com/badoo

https://techblog.badoo.com/

https://twitter.com/kdzuin

http://kdzuin.ru/demos/infinite-scroller/

demo videos