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.

Sign up for GitHub

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

Jump to bottom

Zoom overlay can be wrong size in scrolled content #435

Closed
dpvc opened this issue Apr 12, 2013 · 4 comments
Closed

Zoom overlay can be wrong size in scrolled content #435

dpvc opened this issue Apr 12, 2013 · 4 comments
Labels
Accepted Issue has been reproduced by MathJax team Fixed Test Available v2.2

Comments

@dpvc
Copy link
Member

dpvc 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>
<html>
<head>
<title>Scroll-Zoom test</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    menuSettings: {
      zoom: "Double-Click"
    },
    MathZoom: {
      styles: {
        "#MathJax_ZoomOverlay": {"background-color":"red", opacity:.5}
      }
    }
  });
</script>
<script type="text/javascript" src="../MathJax/unpacked/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>

<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.
</div>

<script>
document.getElementById("scroll").scrollIntoView();
</script>

</body>
</html>
@dpvc
Copy link
Member Author

dpvc 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 added a commit to dpvc/MathJax that referenced this issue Apr 16, 2013
@dpvc
Handle zooming whenit is inside a scrollable element when it is not t…
81eaac0 
…he main body element. Resolves issue mathjax#435.
@dpvc
Copy link
Member Author

dpvc 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.

@fred-wang
Copy link
Contributor

UI/zoom-box-7.html

=> In testsuite, ready for release

dpvc added a commit to dpvc/MathJax that referenced this issue Apr 19, 2013
@dpvc
Merge branch 'issue435' into develop
796c6b4 
Resolves issue mathjax#435.
@dpvc
Copy link
Member Author

dpvc commented Apr 19, 2013

=> Merged

@dpvc dpvc closed this as completed May 17, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accepted Issue has been reproduced by MathJax team Fixed Test Available v2.2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dpvc @fred-wang