Smooth Multi-Touch Zoom Extension for Firefox
Add to Firefox
Update 2020: This feature is arriving natively in firefox! It's expected to be enabled by default in Firefox 83, so this extension will no longer required :)
This extension adds support for smooth zooming with the pinch gesture on a trackpad or touch screen. It's been designed to match the behavior of Chrome and Safari.
Non-multi-touch users can still smooth zoom by scrolling and holding down the Shift key
Zoom can be reset by pressing ⌘ + 0 on macOS or Ctrl + 0 on Windows
Requires Firefox 55 or greater
Motivation
Firefox is still missing smooth multi-touch zoom support, an issue has been sitting in Bugzilla for the last 6 7 8 9 years gathering comments
Given we live in a time with MacBook trackpads as big as a tablet, I've become so used to the pinch-to-zoom feature while browsing in Safari and Chrome that its absence was a deal breaker for me when trying to switch to the new Firefox Quantum. I put this together to try and bring the feature to Firefox
It turned out to be tricker to implement than I thought! There are a number of little hacks required to get it to work and to achieve a smooth user experience. I've explained the implementation below and hopefully this could help someone else trying to achieve high-performance scalling with CSS
Implementation Details and Hacks
No 'real' multi-touch trackpad gesture events in Firefox for Desktop
In-spite of having PointerEvents, TouchEvents and even a 'MozMagnifyGesture' event, none of these will fire when the user performs multi-touch gestures on a desktop trackpad. However, there's a trick to capturing a pinch action: Since Firefox 55.0 the pinch gesture maps to the 'wheel' event with the ctrlKey
flag artificially set to true. It's an ugly hack, but it lets us distinguish between mouse-wheel + ctrl and pinch by keeping track of the real (this is only true on macOS).ctrlKey
state and comparing
We'd really want to capture pinch-start and pinch-end events to enable the best user experience but unfortunately I'm not aware of any technique to enable this.
scaleX()
and scaleY()
isn't enough for acceptable performance
Just setting The page can be magnified by setting a CSS scale transform on the root element, this works for magnification but experience is anything but smooth - even with the new WebRender enabled the experience is essentially the same: janky. To work around the performance problems I found a few tricks:
-
We can abuse
transform: perspective()
for faster zooming. Surprisingly scaling via scale functions and scaling via perspective produces different results. Scaling via scale functions triggers the browser to re-rasterize after scaling. The result is your fonts and SVGs stay sharp when scaled up but it comes with a significant frame-time cost. Scaling via perspective on the other hand, just scales up the already rasterized content - your fonts and sharp lines become fussy as you zoom in but it's much cheaper to perform. To produce the same scale using a perspective transform, we can set the z-coordinate top - p/scale
where p is the CSS perspective value (or distance to the z = 0 plane).To achieve the best of both world we can use the perspective trick during the pinch gesture and swap to regular scale functions once the gesture has finished.
-
Setting
overflow: hidden
on the root element helps to reduce re-painting: scaling causes the content to overflow and the scroll region to change. Rapidly changing the scroll region seems to trigger a whole bunch of expensive work. Setting overflow to hidden seems to prevent this and fortunately we can still usescrollLeft
andscrollTop
to apply an offset to the page, but the scroll bar is hidden and panning is disabled. In this extension overflow is set toscroll
as soon as the pinch gesture completes but there's a noticeable delay between zooming and being able to pan whilst the browser does a whole bunch of repainting work. I'm not convinced this work is necessary but I've not yet been able to hint to the browser that it doesn't need to be done. -
Enabling CSS transitions on the transform property and setting the duration to 0 seconds seems to help. This one is a bit of voodoo, I'm not convinced it should work but it does seem to. It could potentially be acting as a hint to enable certain rendering optimizations but I'm not sure. Would love to learn more if anyone has ideas.
Quirks mode breaks scroll positions
When a site doesn't specify a modern docType, Firefox falls back into 'quirks mode' rendering. In this mode Firefox enables a long list of historic bugs. Foruntately we can detect quirks mode rendering and work around this.
Known Issues
- Elements with
position: sticky
are not correctly scaled up with the rest of the page
Please report any webpages that have issues and I'll see if it's possible to fix them!
Other Notes
Meta tags
Pages may have meta tags to configure the behavior of 'magnifying-glass' zoom on tablets. These tags let a page disable zoom and set the mininum and maximum zoom. So far, all desktop browser seem to ignore these, citing that a page shouldn't have a say on whether or not the user is allowed to zoom. I've decided to match the behavior of other browser and ignore them too but I'd love to hear from users if this should change