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.
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.