Firefox For Mac Zoom
Mozilla Firefox 48.0 or later on PC or Mac; Zoom account linked to a Google Account; Instructions Installing the Firefox Add-on. Navigate to the Firefox Add-ons and search for Zoom Scheduler. Click Add to Firefox. Review the permission and accept by clicking Add. Using the Firefox Add-on. The Zoom Firefox add-on will install a button on your.
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 678 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.
Just setting scaleX()
and scaleY()
isn't enough for acceptable performance
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
1. Navigation Controls | |
---|---|
Option+Home | Open Home Page |
Command+Home | Open Home Page in New Tab |
Command+Left Arrow | Back one Page |
Command+Back | Previous Page in New Tab |
Command+Right Arrow | Forward one Page |
Command+Forward | Next Page in New Tab |
Return | Open Link/Bookmark |
Command+Return/Command+Click | Open Link/Bookmark in new Foreground Tab |
Command+Shift+Click | Open Link/Bookmark in new Foreground Tab |
Shift+Return | Open Link/Bookmark |
Shift+Click | in New Window |
Option+Return | Save Link Target As |
F7 | Caret Browsing |
Down Arrow | Go Down One Line |
Up Arrow | Go Up One Line |
PgDn | Go Down One Screen |
Spacebar | |
PgUp | Go Up One Screen |
Shift+Spacebar | |
End | Go to Bottom of Page |
Home | Go to Top of Page |
F6 | Move to Next Frame |
Shift+F6 | Move to Previous Frame |
Tab | Move Focus to Next Actionable Item |
Shift+Tab | Move Focus to Previous Actionable Item |
▲ up
2. Page Manipulation | |
---|---|
Command+Shift+F8 | Full Screen (toggle) |
Command++/Command+- | Zoom In/Zoom Out |
Command+0 | Default Zoom Level 2 |
Command+P | |
F5/Command+R | Reload Page |
Command+F5/Shift+Reload/Command+Shift+R | Force Reload Page (override cache) |
Esc | Stop Loading |
Command+S | Save Page As |
Command+O | Open File |
Command+U | Page Source |
Command+I | Page Info |
▲ up
3. General Browser Controls | |
---|---|
Command+Shift+? | Help |
Command+D | Add Bookmark |
Option+Drag | Copy Bookmark |
Command+Shift+D | Bookmark all Tabs into a Folder |
Command+Shift+O | Organize Bookmarks |
Command+B | Bookmarks Sidebar (toggle) |
Command+Shift+H | Browsing History (toggle) |
Command+J | Download History |
Command+Shift+J | Error Console |
Command+Shift+P | Start Private Browsing (toggle) |
Command+Shift+Del | Clear Recent History |
▲ up
4. Window and Tabs | |
---|---|
Command+T | Open New Tab |
Command+W | Close Tab |
Command+F4 | Close Window if only one tab |
Command+Shift+T | Undo Close Tab |
Option+Drag | Copy Tab |
Ctrl+Tab | Next Tab |
Ctrl+Shift+Tab | Previous Tab |
Command+1…8 | Select Tab (1..8) |
Command+9 | Select Last Tab |
Command+N | Open New Window |
Command+Shift+W/Option+F4 | Close Window |
▲ up
5. Search Bar | |
---|---|
Command+K | Select Search Bar |
Command+Down Arrow | Select Next Search Engine |
Command+Up Arrow | Select Previous Search Engine |
Option+Down Arrow/Option+Up Arrow | Open List of Search Engines |
Option+Return | Open Search Results in New Tab |
▲ up
To Audio Converter for Mac. To Audio Converter - is the only app you need for audio conversion on Mac OS. It turns more than 200 audio and video formats to quality MP3, WAV, AIFF, FLAC or M4A/MP4 in one click. Access amvidia.com. free downloads of quality audio apps for mac download. MP3 Normalizer improves a sound of MP3 files, supports Peak and Loudness (EBU R128) Normalization methods and Automatic Volume Control for processing of speech records. Simultaneously with normalization, MP3 Normalizer can apply Audio Effects, such as trimming of silence, fade-in, and fade-out for better playback.
6. Media Control | |
---|---|
Spacebar | Play/Pause (toggle) |
Down Arrow | Decrease Volume |
Up Arrow | Increase Volume |
Command+Down Arrow | Mute |
Command+Up Arrow | Unmute |
Home | Back to Beginning |
Command+Left Arrow | Back 10% |
Left Arrow | Back 15 seconds |
Right Arrow | Forward 15 seconds |
Command+Right Arrow | Forward 10% |
End | Forward to End |
▲ up
7. Page Search | |
---|---|
Command+F | Find in This Page |
Command+G | Find Again |
Command+Shift+G | Find Previous |
/ | Quick Find Text |
' | Quick Find Link |
▲ up
8. Text Manipulation | |
---|---|
Command+A | Select All |
Command+X | Cut |
Command+C | Copy |
Command+V | Paste |
Del | Delete |
Command+Z | Undo |
Command+Shift+Z | Redo |
▲ up
9. Forums | |
---|---|
Down Arrow | Select Next Entry |
Up Arrow | Select Previous Entry |
Spacebar | Toggle Checkbox |
▲ up
10. Auto Complete | |
---|---|
Down Arrow | Select Next Auto-Complete Entry |
Up Arrow | Select Previous Auto-Complete Entry |
Del | Delete Selected Auto-Complete Entry |
▲ up
11. Location Bar | |
---|---|
Command+L/F6 | Select Location Bar |
Command+Return | Complete .com Address |
Shift+Return | Complete .net Address |
Command+Shift+Return | Complete .org Address |
Option+Return | Open Address in New Tab |
▲ up