Pinch to zoom vs trackpad pinch to zoom and zooming by code

[Petko Georgiev]

Currently pinching a page via touch on a touchsreen in Chromium (Windows, latest canary) magnifies the page, but it is not the same thing as setting the Zoom via the application menu.

What is the difference between pinch/touch zoom and menu zoom and why it exists? Is there a way to force pinch zooming to affect the zoom percentage rather than magnifying the page?

P.S.: I see that in older Chromium versions mousepad pinching affects the zoom percentage, but in the latest version it behaves like pinch zoom on the screen.

[Kevin McNee]

The kind of zooming that's done via the menu changes the layout of the page in order to make the content larger. This kind of zooming is only done on desktop.

The kind of zooming that's done with a pinch gesture does not change the layout of the page. It performs the magnification effect on the page as is.

Using the desktop zoom mechanism for pinch gestures would be janky, since pinching is a continuous gesture and desktop zoom is done in discrete steps.

[Petko Georgiev]

Thank you very much for the explanation.

Is there some way to customize this behavior or it is only possible to disable it (via --disable-pinch)? The users of my Windows project find this behavior puzzling as they expect it to work like desktop page zoom, so I am wondering if I can do that.

Probably other people using Chromium via Chromium Embedded Framework will find that useful too.

[Kevin McNee]

If all you need is to prevent pinch gestures, you can do that without any downstream changes. To disable touchscreen pinch zoom, you can use the touch-action CSS property. To disable touchpad pinch zoom, you can use a wheel event listener which preventDefaults wheel events with the ctrl key set (chromium sends synthetic wheel events for touchpad pinches).

If, instead of disabling, you want to restore the behaviour of touchpad pinch causing discrete zoom changes on Windows, I suppose you could maintain a downstream revert of the change that introduced touchpad pinch support on Windows. It would appear to be commit 77ff930c1685bca26a5c3b362f732f157f94bece , but I don't have a Windows machine to confirm this. In any case, the idea would be to not generate our gesture events from the OS's events, but to create a fake wheel event with the ctrl key set and send that instead.

Another option which would likely be less of a downstream maintenance burden would be to use the wheel event listener from the first suggestion and send a message back to the browser to adjust the zoom. I'm not very familiar with CEF, but from skimming their documentation, it looks like they provide a mechanism to send messages to a custom handler in the browser from javascript. So you might have something like:

myElement.addEventListener('wheel', (event) => {

  if (!event.ctrlKey) {

    return;

  }

  event.preventDefault();

  // Send a message to your handler in the browser to adjust the zoom.

},{passive: false});

Then in your C++ handler in the browser, adjust the zoom level. See components/zoom/page_zoom.h for the function to call.

Does CEF have extensions? If so, you could message an extension instead which could then use the zoom API (see https://developer.chrome.com/extensions/tabs#method-setZoom).