To see the year out I wanted to create a combined video into a mosaic.

Earth mosaic of all days captured so far for 2017 in 4k pic.twitter.com/VGf5qUct1M

— Earth (@earthin24) January 3, 2018

The generated videos aren’t that big so I never bothered to clean up after my script runs on my server which saved me having to generate them again, phew!

First I can get a quick count of all the videos I have:

ls *.mp4 | wc -l

That gives me 196 videos captured so far. The next step is figuring out how I can arrange them into a tiled square.

Math.sqrt(196) // lets me know I can tile in a nice even 14x14 arrangement.

Creating a mosaic with ffmpeg

This handy write up not only saved me a lot of time but also broke down the often cryptic looking cli flags that ffmpeg has. I won’t reiterate what the the syntax means I highly recommend you read the article to get a great break down of the command that follows.

Not wanting to hand write this syntax for a 196 videos I turn to scripting it, in js no less.

This is the output we want our js to generate so I can copy it into a shell script to execute.

ffmpeg
        -i video.mp4 -i ...
        -filter_complex "
                color=s=720x720:c=black [base];
                [0:v] setpts=PTS-STARTPTS, scale=51x51 [vid0];
                [1:v] setpts=PTS-STARTPTS, scale=51x51 [vid1];
                //...
                [base][vid0] overlay=shortest=1 [tmp0];
                [tmp0][vid1] overlay=shortest=1:x=51 [tmp1];
                // ...
        "
        -c:v libx264 earth_mosaic.mp4

The first thing we can do is use the printf command to spread out -i in our command without having to do it 196 times.

printf " -i %s" 2017*.mp4

This will iterate over any file matching the name 2017*.mp4 and output it as -i 20170620.mp4 and so on. So our command above can be changed to:

ffmpeg
        `printf " -i %s" 2017*.mp4`
        -filter_complex "
                color=s=720x720:c=black [base];
                [0:v] setpts=PTS-STARTPTS, scale=154x154 [vid0];
                [1:v] setpts=PTS-STARTPTS, scale=154x154 [vid1];
                //...
                [base][vid0] overlay=shortest=1 [tmp0];
                [tmp0][vid1] overlay=shortest=1:x=154 [tmp1];
                // ...
        "
        -c:v libx264 earth_mosaic.mp4

The back tick means it’ll replace that command with whatever is returned via stdout.

Generating the complex filter argument

The first thing we need to do is generate the video stream slot and label them all appropriately so we can refer to them in the second step to actually overlay the scaled video in the correct [x,y] position in our black video canvas.

var videos = Array(196).fill('vidya');

function slots(videos, scale) {
  return videos.reduce((acc, cur, idx) => {
    return acc + `[${idx}:v] setpts=PTS-STARTPTS, scale=${scale}x${scale} [vid${idx}];\n`
  }, '')
}

var videos = Array(196).fill('vidya');

First we create an array that matches the length of the videos we have, 196.

Then we have a function that accepts the array and a scale argument.

var scale = Math.round(resolution/Math.sqrt(videos.length));

This is a rounded whole number of our resolution 2160 for 4k and the square root of our videos which is 14, that gives us a video slot size of 154×154 since we’re creating a square video of 2160×2160.

return videos.reduce((acc, cur, idx) => {
  return `${acc} [${idx}:v] setpts=PTS-STARTPTS, scale=${scale}x${scale} [vid${idx}];\n`
}, '')

Using Array#reduce to reduce the video array into a string returning our video slots we’ll use in the next step.

Now we’ve build up our 196 slots we can now overlay our videos into them and position them in the right spot on our video canvas.

function overlay(videos, scale) {
  return videos.reduce((acc, cur, idx, arr) => {
    if (idx === 0) {
      return `${acc} [base][vid${idx}] overlay=shortest=1 [tmp${idx}];\n`;
    }

    var vidLen = videos.length;
    var sqrt = Math.sqrt(vidLen);
    var row = Math.floor(idx/sqrt);
    var tag = vidLen - 1 === idx ? '' : `[tmp${idx}];\n`;

    var y = scale * row;
    var x = scale * (idx % sqrt);

    return `${acc} [tmp${idx-1}][vid${idx}] overlay=x=${x}:y=${y} ${tag}`;
  }, '')
}

Much like the slots function this also accepts the videos array and a scale argument.

if (idx === 0) {
  return `${acc} [base][vid${idx}] overlay=shortest=1 [tmp${idx}];\n`;
}

The first item we handle differently as we need to specify where the first video needs to overlay itself which is our [base] video canvas the default [x,y] coordinates default to [0,0] so we don’t specify it for the first item.

var vidLen = videos.length;
var sqrt = Math.sqrt(vidLen);
var row = Math.floor(idx/sqrt);
var tag = vidLen-1 === idx ? '' : `[tmp${idx}];\n`;

The important variable here is row which we use Math.floor to figure out which row we’re currently on in our grid layout.

var y = scale * row;

With the row figured out we can times our scale (154) by the current row to figure out our y position on our video canvas.

var x = scale * (idx % sqrt);

The x position is slightly different as we need to adjust it for each item in the row so they sit next to each other. To do this we use the handy remainder operator (%) to let us know where in the row range the video should be overlayed e.g.

If we’re up to the second row say item 15:

15 % 14 // 1

The following returns 1 letting us know we’re on the second row as 14 goes into 15 once leaving a remainder of 1 which is what the remainder operator (%) returns.

The last line is just building up the string we’ll return which will look like the following

[base][vid0] overlay=shortest=1 [tmp0];
[tmp0][vid1] overlay=shortest=1:x=154 [tmp1];
// ...

Now we have our two functions to produce the slots and video overlays in the correct position we can now put the together into a function to output our ffmpeg command we want to copy into our shell script to run against out videos to produce the mosaic.

function ffmpegcmd() {
  var resolution = 2160;
  var scale = Math.round(resolution/Math.sqrt(videos.length));
  var videos = Array(196).fill('vidya');

  return `ffmpeg \`printf " -i %s" 2017*.mp4\` -filter_complex "
    color=s=${resolution}x${resolution}:c=black [base];
    ${slots(videos, scale)}
    ${overlay(videos, scale)}
" -c:v libx264 earth_mosaic.mp4
`
}

As mentioned above this function will create the videos and scale arguments to be passed into slots and overlay functions. The string it returns is the same as shown at the start of the article.

One neat trick in the Firefox and Chrome dev tools is you can wrap ffmpegcmd() in the copy() function to take the output and put it on your clipboard instead.

copy(ffmpegcmd()) // returns undefined and adds output to your clipboard instead

ffmpeg is amazing

ffmpeg is an incredibly powerful tool that made this possible and it’s amazing it just worked with combining 196 videos like that.

12pm 25th August – 12pm 26th August 2017 pic.twitter.com/KUL3iz4goQ

— Earth (@earthin24) August 26, 2017

Check out the code on github.

Space is awesome

If you follow me on twitter you may notice I retweet a lot of space stuff so building something space related was inevitable. Way back something came up in my twitter feed, glittering.blue, which is an awesome site that has a video of earth over 24hrs as seen from the incredible japanese himawari8 satellite. This satellite is in geostationary orbit and gives us a nice fixed view of Australia – where I’m from.

Live background image of earth

Initially I wrote a go cli tool to download the latest image of earth available from himawari8 and set it as my background, I was heavily inspired by the code from Charlie Loyd’s python script to download the images found on glittering.blue.

Why not a video every day

To extend the idea I thought why not generate a video everyday and post it to twitter, I did a search and found that a decent twitter name was still available, @earthin24. If you follow you’ll get a gorgeous video once a day.

Things I learned

My background is in front-end development so Go was new territory for me here’s some things I learned along the way while creating this bot.

goroutines and WaitGroup

Initially I had the for loop requesting each frame for the video synchronously which took quite a while as it would fetch 144 images, luckily go is really good at concurrency so I explored the sync package to help track goroutines and only exit once all images have downloaded. Using concurrency would allow me to create 144 goroutines very quickly and concurrently download all of them over a much shorter time period.

Starting a goroutine is as simple as prefixing a function with the go keyword.

for i, _ := range frames {
    go getImage(framePath(first), i)
}

However the process won’t wait for all goroutines to finish before exiting so we need to use sync.WaitGroup

func main() {
     var wg sync.WaitGroup

     for i, _ := range frames {
          wg.Add(1)
          go getImage(framePath(first), i, &wg)
     }

     wg.Wait()
}

For each goroutine we increment the WaitGroup counter using Add and at the end of the block we use wg.Wait() which blocks from exiting until the counter has reached zero.

You’ll also notice I pass a pointer reference to WaitGroup &wg to the getImage method so I can call wg.Done() outside of the current function scope. For more on pointers see the asterisk and the ampersand – a golang tale.

func getImage(url string, name int, wg *sync.WaitGroup, date time.Time) {
     defer wg.Done()
     //...
}

wg.Done() decrements the counter once it’s done. The defer keyword means to delay the function call until the end of the function. It would be the same as just calling wg.Done() at the end of the function but it is idiomatic Go to do this at the beginning using defer.

Automated hands free artisanal space tweets

So far I’ve been running this for a few months and it has posted daily without me needing to think about it. It’s pretty straight forward but there’s a few more learning’s when I set up the cronjob.

bash date

On MacOS you can type date to get the current date in your terminal, when my cronjob runs my bash script it needs to get today-1 in the following format YYYYMMDD:

date -v-1d +%Y%m%d

-v making it very easy by being able to subtract a day from the current date using -1d and then using the +%Y%m%d for the date output_format so a date could come out like so 20170819.

The only problem was when I tried to run this on my Linux based server the date command failed! Seems MacOS uses its own date version different from Linux, to subtract a day we need to use the --date="1 day ago" argument.

date --date="1 day ago" +%Y%m%d

ffmpeg

The go app downloads all the frames ready to be passed into ffmpeg to actually generate the mp4 video that’s posted to twitter & instagram. Since some of the frames are dropped due to the satellite not processing the image at the time the sequential file naming of the files can sometimes skip some numbers throwing off ffmpeg. If you try and pass a sequentially ordered file name pattern to it, ffmpeg will error out when looking for a file name that may be missing.

To get around this we use -pattern_type glob argument for ffmpeg and then just use a simple *.png wildcard.

Instead of ffmpeg -i %4d.png we need to do ffmpeg -pattern_type glob -i '*.png' to cater for the potential non-sequential frames.

Amazing

It continues to blow my mind that I can get images from a satellite and actually do this, the Japanese Space Ageny (JAXA) is absolutely incredible for releasing this to the public.

Bonus

I also extended this to instagram @earthintwentyfour so if you don’t like twitter follow me there.

12pm 25th August – 12pm 26th August 2017

A post shared by Earth (@earthintwentyfour) on Aug 25, 2017 at 8:00pm PDT

TL;DR;

<video autoplay loop muted playsinline src="video.mp4" />

Update: This trick no longer seems to work in the latest iOS however a clever person has an alternative project called NoSleep.js that works. Similar idea but it randomly scrubs the video and seems to require an audio source to keep the screen alive.

Check out the live demo.

The demo uses a base64 encoded mp4 video from Mathias Bynens small repo which makes it around 1.2 – 1.3kb.

playsinline attribute

Finally within iOS10 on an iPhone you can now autoplay a silent video using the new playsinline attribute and avoid the fullscreen player that we’re all used to on iPhones. Check out the webkit blog post on their new <video> policies.

Hiding the video

In order for the phone to stay awake the video needs to be visible and within the viewport so obvious things like positioning off canvas, visibility:hidden and opacity: 0 don’t work. However we can use the following CSS to make it invisible to the human eye but not to the browser and therefore keep the phone from auto-locking.

video {
  position: absolute; // take video out of document flow
  z-index: -1; // position it behind other layers
  opacity: 0.01; // Lowest valid opacity value to make it invisible
  width: 1px; // Reduce default video dimensions to smallest non 0 value
  height: 1px;
}

Chrome iOS

Chrome seems to have a bug where it won’t actually autoplay the video and therefore will go to sleep as the video isn’t playing to keep it awake. Hit me up on twitter if you know how to fix or why it doesn’t work.

Seems in the latest chrome iOS release this now works just fine!

Toggle auto-locking

If anyone wants to run with this you could easily make it start and stop the video via user interaction say you have a timer app you could remove the autoplay attribute and just call play() or pause() on the video to toggle if the phone should sleep or not.

Have fun and don’t abuse this.

After some digging in cURL I found the -F & --form flag to set the file and its content type. If you don’t specify the content type it will be inferred from the files extension.

curl -X PUT https://example.com/api/thing --form 'csv=@stocks.csv;type=text/plain'

Using --form we pass the form data with the following format:

[name]=@[path/to/file];type=[override content-type]

Given your endpoints validation cURL will return whatever response it gets from the API.

Trace ascii output

curl -X PUT https://example.com/api/thing --form 'csv=@stocks.csv;type=text/plain' --trace-ascii -

If you want to see a nicely formatted output you can pass the --trace-ascii - flag which will show the request body as well as the response and all headers. The extra - means it will output to stdout rather than write to a file.

curl -X PUT http://example.com --form 'csv=@stocks.csv;type=text/plain' --trace-ascii -
== Info: Rebuilt URL to: http://example.com/
== Info:   Trying 93.184.216.34...
== Info: Connected to example.com (93.184.216.34) port 80 (#0)
=> Send header, 267 bytes (0x10b)
0000: PUT / HTTP/1.1
0010: Host: example.com
0023: User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; T
0063: rident/5.0)
0070: Accept: */*
007d: Referer:
0088: Content-Length: 472
009d: Expect: 100-continue
00b3: Content-Type: multipart/form-data; boundary=--------------------
00f3: ----25e7f48e0eecccf4
0109:
<= Recv header, 23 bytes (0x17)
0000: HTTP/1.1 100 Continue
=> Send data, 139 bytes (0x8b)
0000: --------------------------25e7f48e0eecccf4
002c: Content-Disposition: form-data; name="csv"; filename="stocks.csv
006c: "
006f: Content-Type: text/plain
0089:
=> Send data, 285 bytes (0x11d)
0000: Date,Open,High,Low,Close,Volume,Adj Close.2016-07-19,305.00,305.
0040: 929993,265.00,288.00,103500,288.00.2016-07-18,286.73999,308.25,2
0080: 85.50,299.00,118000,299.00.2016-07-15,262.019989,267.26001,259.0
00c0: 40009,267.209991,28100,267.209991.2016-07-14,244.220001,246.00,2
0100: 36.800003,243.75,38400,243.75
=> Send data, 48 bytes (0x30)
0000:
0002: --------------------------25e7f48e0eecccf4--
<= Recv header, 33 bytes (0x21)
0000: HTTP/1.1 405 Method Not Allowed
<= Recv header, 31 bytes (0x1f)
0000: Cache-Control: max-age=604800
<= Recv header, 37 bytes (0x25)
0000: Date: Wed, 20 Jul 2016 04:30:16 GMT
<= Recv header, 40 bytes (0x28)
0000: Expires: Wed, 27 Jul 2016 04:30:16 GMT
<= Recv header, 27 bytes (0x1b)
0000: Server: EOS (lax004/2812)
<= Recv header, 19 bytes (0x13)
0000: Content-Length: 0
== Info: HTTP error before end of send, stop sending
<= Recv header, 2 bytes (0x2)
0000:
== Info: Closing connection 0

Hope this helps someone else in the same situation.

Video

Slides

Resources

Here’s a list of resources that really helped me understand what the browser is doing and complexity around how it gets your website displayed on the screen.

• How Browsers Work
• Rendering in WebKit – Eric Seidel (video)
• Critical rendering path
• Series of posts about WebKit’s layout and rendering
• How WebKit works
• Visualising browser layout (video)
• Another layout visualisation (video)
• Building your own browser engine

I have 5 vouchers to give away that will give you free access to the course! The first 5 people to tweet the course link with the hashtag #modernizr3course will get a voucher link to access the course for free.

They’re all gone thanks for playing :).

Check out the course now.

How does flexbox help?

If you’re familiar with flexbox you may have come across the order property which allows you to reorder flex items in a flexbox container and this is the magic that allows us to create reusable list items without having to actually rip the element out of the DOM and then re-inject it in the right place as a user scrolls.

Check out the project on github and have a look at the live demo

How does it work

The whole technique boils down to the flexbox order property which allows reordering of a flex item within a flexbox container, essentially I can say to the browser repaint the DOM node here instead of where it is in the actual DOM structure.

In the above image the top four cells are actually rendered beneath the last four as we’ve informed the browser to repaint them below using the order property.

On scroll I check the scroll position. When the user has scrolled more than the threshold, (3 cells are out of the viewport) I then set the order property on the element that can now be painted at the bottom of the list. To then render the correct data the order number and the array index is passed off to renderCellFn().

First we check the user is actually scrolling and in which direction.

onScroll: function onScroll() {
    scrollTop = body.scrollTop;
    this.direction = scrollTop - lastScrollTop;
    this.checkCells();
}

The scrolling direction is determined by comparing the last scroll top position to the current. The onScroll method is what the scroll event calls directly.

getCurrentCell: function getCurrentCell(count) {
    return this.cells[count % this.cells.length];
}

In checkCells() the getCurrentCell() method is called to determine the current cell by using the modulus (%) operator. Previously I had some over complicated maths to determine which of the re-useable cells I could use but all I really needed was modulus. What it does is divide the current count of “cells” that are out of view by the number of re-useable cells and returns the remainder which is the cell I can then reorder and render the data in.

Once we have the correct cell to use we then determine if it’s far enough out of the viewport to be able to use by calling isTopElementOutOfViewport().

isTopElementOutOfViewport: function(el) {
  var elemPostion = el.getBoundingClientRect(),
      bottomOffset = elemPostion.bottom - (this.container.offsetTop - body.scrollTop);

  return !!elemPostion && bottomOffset <= -(this.cellReorderThreshold());
}

To determine if it’s out of viewport we use the getBoundingClientRect() which will return a bunch of metrics about the cell we’re looking to use. This sort of operation is normally expensive and will cause a layout to trigger but since our actual DOM is so small it’s insignificant for the browser to do.

this.cellsOutOfViewportCount++;
this.cellIndex = this.cellsOutOfViewportCount;
this.elementStyle.paddingTop = parseInt(this.elementStyle.paddingTop || 0, 10) + this.CELLHEIGHT + 'px';
this.currentCell.style[orderProp] = this.cellIndex;
this.renderCell(this.currentCell, this.cellIndex-1);

If the top cell is far enough out of view then we can trigger the reorder, render the new data and increase the lists top padding to maintain the correct scroll position.

Why not use requestAnimationFrame?

You may be asking why I don’t use requestAnimationFrame when calling checkCells(). In Firefox the performance degraded massively and I’m not entirely sure why. So I’ve avoided it for the time being.

Performance and visualising the technique

In the screencast I show performance benefits of this technique when working with asynchronously loading data and comparing it with a regular technique for loading async data. I also cover and visualise how the cells are being reordered using the awesome chrome://tracing tool.

TL;DR Gif

Needs battle testing

The code base is fairly beta and quite usable but there is still some work to do, as I’ll list below:

Some of the issue and limitations are:

• It only works with fixed height cells.
• It has to be a flexbox supporting browser which is pretty good but no <IE10
• iOS won’t trigger scroll events until after the page has stopped scrolling, this will require the use of a scrolling library.
• Accessibility?
• Only reacts to scroll events, keyboard users won’t see list updated.
• Doesn’t render the cells if you refresh and the browser re-instates the scroll position.

We need this built into the Web Platform

If we want web apps to be performant then this elaborate hack should be built in to the Web Platform allowing the browser to handle the logic behind re-using cells without killing performance. We could introduce a property on ol/ul or even have a new element that treats any children as a re-usable cell.

There are some early editor drafts of specs that may help with this, the two I know of are css-containment and the will-change property.

Some of the MV* frameworks also have components for working with large data sets but most have the restriction of fixed height cells due to heavy recalculation issues when using variable height cells. Ember has list-view, Angular has ng-scroller. Both of these libraries remove and re-inject DOM nodes.

Paul Irish has compiled a good list of libraries and list of Do’s and Dont’s to reduce jank when scrolling

TL;DR

I have a cronjob on my raspberry pi that triggers 2 mins before my alarm to run some ruby code that’ll trigger a slow fade in of colours to simulate a sunrise. The light will go from a very dim red all the way through until a bright yellow almost white light. Code is on github.

What you’ll need

• Lifx bulb
• A server or computer that is always on. I have a raspberry pi
• Any alarm, I use the rise app that plays nice bird chirping sounds.

The code

At the moment lifx only has official libraries for Java, Objective-C & Ruby. Being that I’m diving into ruby at the moment this was perfect. There is a unofficial node library that you could use too if you’re afraid of anything that’s not JavaScript.

require 'lifx'

label = ARGV[0]
time = ARVG[1] ||= 120

client = LIFX::Client.lan
client.discover! do |c|
    c.lights.with_label(label)
end

client.lights.turn_on
light = client.lights.with_label(label)

fade_time = time # time in seconds
interval = 6 # run every 6 seconds
increment = fade_time/interval
luminence = 0.01
luminence_increment = 1/increment.to_f
hue_increment = 60/increment # Fade from red to bright yellow 0 to 60
hue = hue_increment

light.set_color(LIFX::Color.hsl(0, 1, luminence), duration: interval)

def set_interval(delay)
    Thread.new do
        loop do
            sleep delay
            yield
        end
    end
end

sunrise = set_interval(interval) do
    if luminence >= 1
        sunrise.kill
    end

    light.set_color(LIFX::Color.hsl(hue, 1, luminence), duration: interval)
    luminence = luminence + luminence_increment
    hue = hue + hue_increment
end

sunrise.join

The code is pretty simple I setup a thread to run every 6 seconds and slowly increase the hue and luminance values over a 2 minute period.

The Lifx gem API is pretty simple I would suggest going over to their docs to learn more about specifics. Basically my code is just discovering my one and only light that has the label that I passed in as an argument and then I just increment the HSL colour values.

Hooking up the cronjob

On the server side of things in my raspberry pi I register this shell script to run.

#!/bin/bash

source ~/.rvm/scripts/rvm
cd ~/sunrise-lifx
bundle exec ruby ~/sunrise-lifx/sunrise.rb "Bedroom"

The reason I do this is because I need to source in the rvm scripts so I can run my ruby code. Cron starts a bare bones shell so even if you already source in stuff in a .bash_profile you’ll still need to manually source in the stuff you need when executing as a cron job.

The cronjob runs two scripts, one to trigger the sunrise simulation on weekdays at 6:28am and another that runs 15 minutes later to turn the light off as I should be up by then.

28 6 * * 1-5 ~/sunrise-lifx/sunrise.sh >> ~/sunrise-lifx/cronOutput.txt 2>&1
45 6 * * 1-5 ~/sunrise-lifx/turn-off.sh >> ~/sunrise-lifx/cronOutput.txt 2>&1

That’s it. Super simple setup and seems to work pretty well so far.

Take a look at the final test case that performs the best, watch the screencast and checkout the 60fps-scroll repo. Read on to learn why.

Critiques

There were two valid critiques that were brought up:

• Style recalculation hit when adding class to body.
• User clicking something while scrolling or before timeout runs.

Pointer-events: none not the silver bullet

The original idea of disabling pointer-events on the body gives you the illusion that scroll performance is great but let’s face it simple sites don’t really have scroll jank issues. Where we do see flaws in the original technique is when we it’s used on more complicated visually rich sites. By adding a class to the body we force the browser to do a style recalculation which is costly on the body as it has to traverse the whole tree to make sure this top level class doesn’t effect any children.

The above image is a timeline snapshot of the more complex DOM using the older technique of changing the class on the body, as you can see this can just blow away your pursuit of 60fps scrolling before you’ve even began.

Mobile

On mobile or touch based devices this technique really has no effect as this is only relevant for mouse cursors. Running the test case in an iPhone works as normal when scrolling.

Firefox degradation

The original test case was very janky in Firefox and quite slow. Without the equivalent timeline tool it’s hard to say what the browser is exactly doing on scroll. The revised technique performs a lot better as it doesn’t trigger any repaints or high style recalculations.

What other browsers do on scroll

IE11 and Firefox both turn off hit testing on scroll if the users mouse doesn’t move. Safari I’m not sure what it does.

Solving clicks before the timeout has triggered

One of the critiques was what if the user clicks on something as they’re scrolling or clicks something before the timeout has ran once the user stops scrolling.

We can semi-solve this via the use of elementFromPoint and triggering synthetic events. This won’t solve every edge case but it will get you mostly there.

// capture all clicks and store x, y coords for later
document.addEventListener('click', function(event) {
  if(event.target === cover && !event.synthetic) {
      pos.x = event.clientX;
      pos.y = event.clientY;
      clicked = true;
  }
}, false);

function dispatchClick(coords){
  var event = document.createEvent("MouseEvent"),
      elem = document.elementFromPoint(coords.x, coords.y);

  event.initMouseEvent(
      "click",
      true /* bubble */, true /* cancelable */,
      window, null,
      coords.x, coords.y, 0, 0, /* coordinates */
      false, false, false, false, /* modifier keys */
      0 /*left*/, null
  );
  event.synthetic = true;

  elem.dispatchEvent(event);
}

By attaching a listener to the document we can capture all clicks that happen before the timeout fires by storing the cursor x, y coordinates when the timeout fires we can target the element via elementFromPoint and then trigger a synthetic event on that element.

// On timeout check to make sure the user actually clicked during scroll
// Dispatch synthetic click event
setTimeout(function(){
  //...
  if(clicked) {
    dispatchClick(pos);
    clicked = false;
  }
},500);

The downside to this approach is this will only trigger listeners attached via JavaScript it won’t trigger an actual click so if I was to click on a form submit button it wouldn’t do anything. This won’t work on iframes either so things like social button embeds etc. Of course once the timeout has fired all clicks will worked as expected.

Alternate solution using a div that follows the mouse cursor

One suggestion in the comments was to use a small cover div that follows the mouse cursor as the user scrolls and use CSS transforms to move it on the viewport so it won’t cause any layouts. I found the performance degraded compared to the original pointer-events technique and it also oddly triggered layouts/paints when changing the translate property but not all the time. Perhaps my test case is flawed? If you know how to fix it let me know.

Check out the test case for yourself. Note that this demo only alters the webkitTransform property so it won’t do anything in Firefox.

Using a cover div + pointer-events: none

We’ll dive into the following test case that uses a cover div and pointer-events: none and go through some optimisations to improve it further.

One of the main things when working with lots of images is not resizing them through CSS or the img elements width/height attributes as the browser has to decode the image and resize it before painting it to the screen. This makes sure your scrolling performance isn’t hit hard by big repaints. Harder to do when catering for High DPI screens but definitely a solution that the picture element will solve in the future.

60fps-scroll library

I created a little library that wraps up this technique that you can drop into your site and see if it helps your scroll performance.

Pursuit of a false metric?

Some may have the feeling that this may be a case of the premature optimisation gremlins and they’re right. I wouldn’t get caught up on 60fps performance until you have a problem with your scrolling where it can really effect the end users experience within your site.

UPDATE: I’ve done a follow up article which demonstrates a more robust technique.

.hover .element:hover {
  box-shadow: 1px 1px 1px #000;
}

That approach doesn’t scale well and it creates unnecessary specificity in your CSS.

The gist of the technique is on scrolling the .hover class is removed from the body and all your .hover selectors won’t match until the user stops scrolling and the class is then added back to the body.

Then I saw a genius little tweet from Christian Schaefer.

@paul_irish Easy. Apply "pointer-events: none" to the <body> on scrollstart and remove it on scrollend. @tabatkins

— Christian Schaefer (@derSchepp) November 12, 2013

Pointer-events property to the rescue

This is a much better approach as it will just make the mouse pass through the element that has the pointer-events: none property set. Take a look at the screencast I did showing the dramatic difference disabling hover makes.

We get all the benefits of the original approach without introducing maintainability and specificity issues in our CSS.

.disable-hover {
  pointer-events: none;
}

All we have to do is add the .disable-hover class to the body when the user begins to scroll. This then allows the users cursor to pass through the body and thus disable any hover effects.

var body = document.body,
    timer;

window.addEventListener('scroll', function() {
  clearTimeout(timer);
  if(!body.classList.contains('disable-hover')) {
    body.classList.add('disable-hover')
  }
  
  timer = setTimeout(function(){
    body.classList.remove('disable-hover')
  },500);
}, false);

The code is pretty simple we clear the timeout, this is important after the initial scroll, check to see if the disable class isn’t already on the body element and then set up a delayed timer to remove the class once the user has stopped scrolling for at least 500ms.

A more robust technique

Now applying pointer-events to the body will work just fine in most cases but if pointer-events: auto is applied to any child elements they will override the parent property and cause janky scroll.

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

Easy solution is to do the asterisk selector and add an important to the property value so it will disable any child elements with pointer-events turned on.

Take a look at the testcase for yourself and run some timelines to see the performance gains from this simple technique.