SmoothZoom

SmoothZoom – Quick Page Zoom installed!

Hold right-click and spin the mouse wheel to zoom toward the cursor. Enjoy the convenience of pinch-to-zoom functionality from touch screens, now available on your desktop.

Refresh currently open tabs for changes to take effect.

SmoothZoom updated! Check out the great new features and the new look in version 1.1.1!

Hi! I'm a solo developer of SmoothZoom browser extension.

Here's a list of issues that cannot be solved with current browser technology:

Elements with fixed position High importance

When zooming, the root element gets the transform style and consequently creates a containing block for absolute and fixed positioned descendants. To preserve their position on the viewport, they have to position with scroll distances added to their coordinates. The problem is in locating these elements. One method, that 100% works, is to query all elements in the DOM, call getComputedStyle on each one of them and get the position property. Of course, this is unacceptably slow because it has to happen the moment before the zoom starts. The current method works by reading all document stylesheets, extracting selectors of rules with a fixed position, and finally, using only these selectors on the first method. The problem is when a stylesheet is cross-origin because the CORS error raises when trying to read it. Debugger API can access all loaded resources, which implies it is possible to locate wanted selectors in CSS strings. After implementing this method, I concluded that it works in all cases, but I decided not to go with it. Here are the reasons why:

The message "SmoothZoom extension started debugging this browser." appears in a large infobar label that moves the page away from the top of the viewport.
The debugger API is not available as optional permission. It also brings up this warning on installation: "Access the page debugger backend."
The process of attaching the debugger itself is slow and requires many async calls. There is a noticeable difference in waiting time, the moment before the zoom starts.

Sandboxed frame elementsMedium

The extension works even when frames are nested and dynamically created. Each frame gets a "messenger" function which propagates registered events up to the top frame. The top frame shares the current zoom state object with all the other frames so that each stays synchronized. However, some frames with strict sandbox attribute don't allow content script injection and therefore it is impossible to register any events while the cursor is hovering over them. For example, this can happen with Google Ads. To zoom towards an element like this, the only solution is to disable interactivity (option from the popup), trigger the zoom anywhere around it, and finally zoom inside that element.

Fullscreen problemsMedium

It is impossible to zoom a fullscreen element. However, I found a workaround — The moment before zoom starts, the extension exits fullscreen and makes the root element go fullscreen instead. This way, the element that was previously in fullscreen is now zoomable. It becomes temporarily fixed positioned to cover the entire viewport, which leads to another problem if it is nested. Instead of changing its position in DOM, all its ancestors temporarily need to have the highest specificity style that defines values: filter, transform, backdrop-filter, perspective, contain, transform-style, content-visibility, and will-change as none or initial. These are the properties that result in the creation of a containing block for absolute and fixed positioned descendants. Lastly, to request fullscreen on an element, the user must interact twice because each call on requestFullscreen "eats" the user's event, which explains why the "Hold to zoom" option from the popup appears disabled. The remaining problem is: requestFullscreen() not working with modifier keys inside keyup event, meaning it is impossible to go fullscreen if the zoom activation key is Alt, Ctrl, or Shift.

Toggling JavaScriptLow

It is possible to toggle Javascript with Content Settings API, and it would be great if this was one of the options in the extension's popup. Zooming with temporarily disabled JavaScript prevents potential content adjusting and could improve performance significantly. However, toggling Javascript is not possible without reloading the page. Another problem is that the API toggles JavaScript for all pages that match the given location origin. On top of that, this API requires permission with possibly the scariest user warning: "Change your settings that control websites' access to features such as cookies, JavaScript, plugins, geolocation, microphone, camera etc.". DevTools Debugger has the option to toggle JavaScript instantly, per tab, but there is no way to access it programmatically.

This text was last updated on June 5, 2023. If you found a solution to any of these issues, please contact me: [email protected]

More info

Welcome to SmoothZoom test page!

Access this page anytime by clicking on the SmoothZoom title from the popup. Here is the identical version of the popup, accessible from the extension icon:

Use it to find settings that suit you best. They automatically sync to your browser account.
For low-end PCs or heavy websites, try making these changes in the following order:

Uncheck Always follow cursor
Check Disable interactivity
Reduce Smoothness to 0ms
Check Use screenshot