When we talk about cool, new browser features, it usually devolves into our woes about supporting no javascript, IE7, older Android phones, or “that awful Kindle Fire.” As we have these types of discussions, we begin to create a narrative about things we wish we could do and ways we can hack something together to achieve a functional feature. However, what we are really doing is slowly forming a dichotomy of old, featureless browsers and evergreen browsers. But what happens when our champion browsers don’t have the same features—or worse, just implement them in completely different ways?
The Problem
On a recent project, we were asked to implement what I will refer to as “horizontal, sticky headers.” What this looks like is taking iOS’ contacts sticky header and turning it sideways.
After a lot of prototypes and attempts, we finally settled on using the requestAnimationFrame API with 3D transforms. However, after running the demo through Safari, it was quickly apparent that the styles were not being updated fast enough to reach the 60 fps goal.
What we found was that the scroll properties were updated more slowly in Safari, which resulted in a “stuttered” experience. In case you missed that, this is a problem in a modern browser, not an older browser we so often scoff at.
After a long time of research and testing the best fix for Safari, we finally found that we could use the CSS property position: sticky for not just vertical, but also horizontal “stickiness” to a container.
The Solution
Although position: sticky has very low browser support, this CSS property is just what is needed for Safari to have a smooth transition without the stutter we experienced earlier. The native browser CSS implementation helps us achieve the results we want, but with very little support.
This leads us to Modernizr. Modernizr is a great tool for detecting features of your user’s browsers such as CSS properties and JS features. In this specific case, we can use Modernizr to determine if a browser has position sticky support, and if not, fall back to transforms or native absolute positioning.
So, now we can see that regardless of browser, there is an implementation that works, and in evergreen browsers, we have a very nice, smooth transition utilizing the best of browser features possible.
Feature Detection Is Your Friend
Every new animation, design feature, or component will involve some browser quirk that you will have to account for. Are you using local storage, cookies, lodash, jQuery? You are using a type of feature detection to achieve an experience that can be functional to the most users as possible. Look out for your users, and try to use enhancements as features, not core functionality. This will make your users happy and your development a little simpler to manage.
