PalmerAL
commented
1 year ago This is a neat approach, but I think we should investigate first why ctrl+scroll inside an iframe doesn't work - I would expect that to zoom the whole page in or out (on any site, not just reader mode). The way that's implemented is that there's a preload script that runs inside the webpage that sends mouse events to the UI process: https://github.com/minbrowser/min/blob/master/js/preload/default.js#L19-L22
And then in the parent process, it listens for those events and zooms the page: https://github.com/minbrowser/min/blob/master/js/webviewGestures.js#L167-L176
My guess is that the mouse events aren't being forwarded from the iframe correctly somehow, but I haven't looked into it.
A fix for : 'Reader View' zoom in / out via ctrl + mouse wheel or ctrl++ / ctrl+- not working. However it only addresses ctrl + mouse wheel zooming.
Caveat
Not sure how this will behave in MacOS which uses the Cmd key instead of Ctrl. Do MacOS browsers make the substitution automatically or this case needs to be handled in code as well?
I could use e.metaKey to detect the Cmd key on MacOS but it will return true if the windows key is pressed on Windows.
How it looks like in practice
https://user-images.githubusercontent.com/70408318/219492984-132f39e2-bb1e-4818-944a-18b070abe4ee.mp4
Reasoning behind the fix
The issue was that you can't zoom/de-zoom the page if the cursor is above the iframe which contains the article. I first tried to write some logic to zoom de-zoom the iframe itself.
The issue is that the article would indeed zoom/de-zoom but not the rest of the page which looked jarring.
I finally ended up creating a transparent div that I put above the iframe. If the user presses the Ctrl key we set pointer-events property of the transparent div to none. This way the cursor interacts with the div and not the iframe. This allows the user to leverage zooming/dezooming the same way you would normally on a web page.
Once the user stops pressing Ctrl we set the pointer-events property to auto which allows the user the interact with the iframe beneath the div. This way the user can click on links, highlight text, etc...
Tests
I only tested this on my local windows machine.