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

MathJax zoom overflows its box for long equations #423

Closed
maplemuse opened this issue Mar 26, 2013 · 15 comments

Comments

Projects
None yet
3 participants
@maplemuse
Copy link

commented Mar 26, 2013

With a long, linebroken equation, the zoom feature has some poor rendering.

http://jsfiddle.net/Cfrrf/9/

The zoomed equation is not contained within the bounding box, and is cropped. This may be a result of being within an iframe, but this is a valid use case.

MathJax Equation Demo jsFiddle

@dpvc

This comment has been minimized.

Copy link
Member

commented Mar 26, 2013

Looks like a Mobile Safari issue. It is supposed to be clipped to the grey zoom box and get scroll bars, but apparently that isn't happening in Mobile Safari (it does in desktop Safari, Chrome, Firefox, and on Android browser, at least).

I'll have to look into it.

@maplemuse

This comment has been minimized.

Copy link
Author

commented Mar 26, 2013

The screenshot is from Chrome on Windows 7.
Also occurs in FireFox on XP.

@dpvc

This comment has been minimized.

Copy link
Member

commented Mar 26, 2013

OK, I'll check into those as well. It works for me on Mac OS X, but I'll check the Windows versions you indicate.

@dpvc

This comment has been minimized.

Copy link
Member

commented Mar 26, 2013

I'm not able to reproduce your output. I get the expected scroll bars with the text properly restricted to the zoom box, which scrolls to reveal the material to the right. So that is as I would expect it to work. The only issue I have is that the left-hand side is shifted as in your image, so that is a problem.

I tested with Chrome on Windows 7 and Firefox on Windows 7 and Windows XP. Same results in both places. Note sure why you are seeing the text slip out of the zoom box. Do you have any extensions or custom CSS stylesheets that could be affecting that?

@maplemuse

This comment has been minimized.

Copy link
Author

commented Mar 27, 2013

Just tested this on an XP VM. Firefox seems to render within the zoom box, but Chrome still extends beyond the box with this example.
I'm not sure if the math scaling of 130% (and zoom scaling of 200%) is relevant.

I'm not loading any additional css styles. The image fonts have been disabled, if that matters.

@dpvc

This comment has been minimized.

Copy link
Member

commented Mar 27, 2013

What version of Chrome are you using?

@maplemuse

This comment has been minimized.

Copy link
Author

commented Mar 27, 2013

25.0.1364.172 m. Just updated to 26.0.1410.43 m, where the problem still exists.

The result iframe in the jfiddle is 700 pixels wide.

<span id="MathJax_ZoomOverlay" style="left: -401px; top: -56px; height: 638px; width: 967px;"></span>
<span id="MathJax_Zoom" style="font-size: 200%; max-width: 595px; max-height: 528px; overflow: visible; left: -391px; top: -46px;">....SNIP....</span>

There is clearly a difference between the width of the overlay and the zoom box. overflow is also being set to visible. If I manually tweak that to scroll, at least the content stays within the zoom box.

@pkra

This comment has been minimized.

Copy link
Member

commented Mar 27, 2013

@maplemuse which browser versions are you on?

@maplemuse

This comment has been minimized.

Copy link
Author

commented Mar 27, 2013

@pkra
Chrome 26.0.1410.43 m,
Firefox 19.0.2.
Both on Windows 7 exhibit the zoom overlay problem.

@dpvc

This comment has been minimized.

Copy link
Member

commented Mar 27, 2013

The overlay is a transparent background that is used to trap click events and close the zoom box, so its width and height should be that of the window (or iframe in this case). It should not match the zoom box itself.

Clearly the issue is the overflow:visible. There is a check to see if the zoom box is smaller than its maximum width and hight, and if so, its overflow is set to visible, so I suspect that is the cause of the trouble in this case. It may be that the content is ending up zero width and height (perhaps the content hasn't repainted yet), and the overflow is being changed inappropriately. I'm still only able to reproduce the issue in Mobile Safari, so I guess I may have to use that as the testing environment.

I'll keep looking into it. I suppose for now you could add

MathJax.Hub.Config({
  MathZoom: {
    styles: {
      "#MathJax_Zoom": {
        overflow: "auto ! important"
      }
    }
  }
});

to override the overflow:visible that MathJax is applying.

@dpvc

This comment has been minimized.

Copy link
Member

commented Mar 27, 2013

(Sorry, submitted the comment too soon, so if it came through incomplete, see the GitHub site for the complete message).

@maplemuse

This comment has been minimized.

Copy link
Author

commented Mar 27, 2013

@dpvc That does seem to be a workaround for the overflow. Any idea on what is causing the left shift?

@dpvc

This comment has been minimized.

Copy link
Member

commented Mar 28, 2013

Any idea on what is causing the left shift?

Not yet. I haven't had the chance to look into it yet.

@ghost ghost assigned dpvc Apr 15, 2013

@dpvc dpvc added Ready for Review and removed Investigate labels Apr 11, 2014

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 11, 2014

I believe that I have taken care of this in the zoom-fix branch of my fork of MathJax (along with some other zoom problems).

@dpvc dpvc added Merged and removed Ready for Review labels Apr 11, 2014

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 11, 2014

=> Merged.

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.