# 60fps on the mobile web

DevFeed: [60fps on the mobile web](<https://devfeed.tech/articles/60fps-on-the-mobile-web-31888.md>)

Original publisher: [Read original article](<http://engineering.flipboard.com//2015/02/mobile-web>)

Author: https://twitter.com/bapjuseyo (Michael Johnston)

Published: 2015-02-10T00:00:00Z

Content type: article

Language: en

Sources: [Flipboard](<https://devfeed.tech/sources/flipboard.md>)

Topics: [Mobile](<https://devfeed.tech/topics/mobile.md>), [Web](<https://devfeed.tech/topics/web.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [ui](<https://devfeed.tech/topics/ui.md>), [HTML5](<https://devfeed.tech/topics/html5.md>)

Tags: [canvas](<https://devfeed.tech/tags/canvas.md>), [css](<https://devfeed.tech/tags/css.md>), [html5](<https://devfeed.tech/tags/html5.md>), [jank](<https://devfeed.tech/tags/jank.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [performance](<https://devfeed.tech/tags/performance.md>), [smartphone](<https://devfeed.tech/tags/smartphone.md>), [touchscreen](<https://devfeed.tech/tags/touchscreen.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

Flipboard describes bringing its mobile-first experience to the web and explains how it optimized scrolling and animation performance. The article discusses the limits of DOM updates during animation and considers hardware-accelerated HTML5 Canvas for building a user interface.

## Source excerpt

Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we're coming full circle and bringing Flipboard to the web. Much of what we do at Flipboard has value independent of what device it's consumed on: curating the best stories from all the topics, sources, and people that you care about most. Bringing our service to the web was always a logical extension. As we began to tackle the project, we knew we wanted to adapt our thinking from our mobile experience to try and elevate content layout and interaction on the web. We wanted to match the polish and performance of our native apps, but in a way that felt true to the browser. Early on, after testing numerous prototypes, we decided our web experience should scroll. Our mobile apps are known for their book-like pagination metaphor, something that feels intuitive on a touch screen, but for a variety of reasons, scrolling feels most natural on the web. In order to optimize scrolling performance, we knew that we needed to keep paint times below 16ms and limit reflows and repaints. This is especially important during animations. To avoid painting during animations there are two properties you can safely animate: CSS transform and opacity. But that really limits your options. What if you want to animate the width of an element? How about a frame-by-frame scrolling animation? (Notice in the above image that the icons at the top transition from white to black. These are 2 separate elements overlaid on each other whose bounding boxes are clipped depending on the content beneath.) These types of animations have always suffered from jank on the web, particularly on mobile devices, for one simple reason: The DOM is too slow. It's not just slow, it's really slow. If you touch the DOM in any way during an animation you've already blown through your 16ms