Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoom overlay can be wrong size in scrolled content #435

dpvc opened this issue Apr 12, 2013 · 4 comments


None yet
2 participants
Copy link

commented Apr 12, 2013

If a page contains an element that has scrolling (or more generally, overflow that hides the height of its contents), then the overlay used to detect mouse clicks when the zoom box is showing may be the wrong size or wrongly placed. That means that there may be areas that should be covered that aren't, and so clicks can be made without closing the zoom box.

Here is a sample document the illustrates the issue (read the text in the page).

<!DOCTYPE html>
<title>Scroll-Zoom test</title>
<script type="text/x-mathjax-config">
    menuSettings: {
      zoom: "Double-Click"
    MathZoom: {
      styles: {
        "#MathJax_ZoomOverlay": {"background-color":"red", opacity:.5}
<script type="text/javascript" src="../MathJax/unpacked/MathJax.js?config=TeX-AMS_HTML"></script>

<div style="border:1px solid black; overflow:auto; height:25em; width:20em; font-size:150%">

<div style="height:20em; width:1em; background-color:yellow"></div>

<p id="scroll">
This DIV has a fixed height, so it's contents
doesn't contribute to the height of the page.  So even if it has lots of
content, the page's scrollHeight will be small.  That will cause MathJax to
get the wrong size for the background overlay when it makes a zoom box.
Try it out here with a double-click:

\[x+1\over x-1\]

The red box is the overlay that is supposed to cover all the content, but
doesn't in this case.  The size of the red box when the zoom box is showing
will be the size of the window, not the size of this content.  You should
see horizontal scroll bars because the window is wider than the DIV. Try
resizing the window to see the results.



This comment has been minimized.

Copy link
Member Author

commented Apr 12, 2013

The solution may be to look through the parent elements to see if there is one with a scrollHeight or clientHeight or offsetHeight (whichever is the right one for that) that differ from each other. Or perhaps checking the element CSS to see if overflow is set, or if the element has a fixed height that is smaller than its content's height, or something like that. I'm not sure what the best course is, at the moment.

This also brings to the fore a problem that I've been ignoring for a while, which is that if the math is inside an element with overflow:hidden, the zoom box can be clipped if it is too big to fit in the element (since its size is based on the window, not the container with hidden overflow), and the overlay will be clipped as well. So you can click on other areas of the screen without closing the zoom box.

@ghost ghost assigned dpvc Apr 15, 2013

dpvc pushed a commit to dpvc/MathJax that referenced this issue Apr 16, 2013


This comment has been minimized.

Copy link
Member Author

commented Apr 16, 2013

OK, I've written some code to handle the case when zooming is inside a container with overflow other than "visible" (i.e., a scrollable container). I haven't tested it in IE yet, but it works elsewhere. It's in the issue435 branch of my fork of MathJax.


This comment has been minimized.

Copy link

commented Apr 19, 2013


=> In testsuite, ready for release

dpvc pushed a commit to dpvc/MathJax that referenced this issue Apr 19, 2013


This comment has been minimized.

Copy link
Member Author

commented Apr 19, 2013

=> Merged

@dpvc dpvc closed this May 17, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.