Skip to content

Fix problem with two background images in Webkit #1471

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
Closed
wants to merge 1 commit into from
Closed

Fix problem with two background images in Webkit #1471

wants to merge 1 commit into from

Conversation

sbutkaliuk
Copy link

Resolves issue #1466

  • workaround for issue 1466 as default display:block makes Webkit browsers to render second image and not delete it

@sbutkaliuk
Fix problem with two background images in Webkit
b9e8919 
Resolves issue mathjax#1466
- workaround for issue 1466 as default display:block makes Webkit browsers to render second image and not delete it
@dpvc
Copy link
Member

dpvc commented May 16, 2016

First of all, thanks for tracking down the issue (I suspected that was the cause), and for being willing to share a solution with us. Also, thanks for making your pull request from and to the develop branch. Not everyone does that properly, so we appreciate the attention to detail.

There is an issue, however, with the changes you are suggesting, and that is that they don't work properly if there are floating elements on the page. For example, consider the page

<!DOCTYPE html>
<html>
<head>
<title>Test of inline-block rather than hr</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  SVG: {linebreaks: {automatic: true}}
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_SVG"></script>
</head>
<body>
<div style="width:600px; min-height:125px; background:yellow; border:1px solid black">
<div style="float:right; background:green; width:100px; height:125px; opacity:.5"></div>
<div style="float:left; background:green; width:100px; height:125px; opacity:.5"></div>
$$
   x + x + x + x + x + x + x + x + x + x +
   x + x + x + x + x + x + x + x + x + x
$$
$$E=mc^2\tag{1}$$
</div>
</body>
</html>

which has floating green rectangles at the left and right. With the <hr>, the width will be determined as the width between the two green rectangles (the yellow area below), and the equations will appear between them, properly wrapped to that size, and with the tag at the proper location:

svg-hr

On the other hand, with the display:inline-block and width:100% (the width:auto would need to be changed in your SVG edits since auto would give a width of 0), the equations would have to take up the complete width of the yellow rectangle, and so would not fit within the space between the green ones. They will appear below, as in:

svg-inline

(There are similar issues with the HTML-CS output, but one must include the handle-floats extension in order to get the display as shown above.)

The <hr> element was the only one that I could find that would take the floating elements into account, and I could not find CSS options that produce the same results without triggering a block element, which is what causes WebKit to insert the second background image.

So I'm afraid that we won't be able to accept this set of changes. I have something else planned, however, that should handle the floats properly, and will still allow you to include a configuration that would give you the inline-block approach that you need; it just would not be the default for MathJax. What I have in mind would also resolve a long-standing issue with measuring the available width when the math is inside an element that "shrink-wraps" its contents (like an inline-block or a table cell). Your PR also made me notice that the CSS in the HTML-CSS version should have width:auto not width:100% as well. So your suggestion has been a help even though it will not be included directly in MathJax. So thanks again.

@sbutkaliuk
Copy link
Author

Thanks for so detailed response.
Can you roughly estimate in what time we can fix this two-image-rendering issue? We are facing it on the production pages and it's quite annoying.
I've fixed it with with styling hr block as inline-block right in minimized scripts on our server. But, as you mentioned, it can cause other issues, so we'd want more complex solution.

@dpvc
Copy link
Member

dpvc commented May 17, 2016

Can you roughly estimate in what time we can fix this two-image-rendering issue?

The next release is going to be at least two months away, I expect. And just to be clear, I have not solved your two-image problem. As I said above, I can't find CSS that would allow MathJax to handle floating elements properly that doesn't also trigger the double image.

What I am planning to do is to make it easier for you to apply your in-line block solution without having to modify MathJax itself. (It will be able to be done in the configuration rather than in the code directly.) This solution is not perfect, as it still has the problems with floating elements. But if you aren't using floating elements, then it should be sufficient for your needs. If you are using floating elements, and are either using equation numbers or automatic equation wrapping, then you can face the problem of having the math fall below the floating elements rather than next to them.

I do not have a better solution for you at this time. The issue is really a bug in WebKit, and we don't have a work-around that meets all the requirements of MathJax and your situation.

@dpvc dpvc closed this May 18, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@sbutkaliuk @dpvc