Skip to content

Bug [WebKit]: Parent background-image renders two times #1466

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
Open
sbutkaliuk opened this issue May 10, 2016 · 6 comments
Open

Bug [WebKit]: Parent background-image renders two times #1466

sbutkaliuk opened this issue May 10, 2016 · 6 comments
Labels
Accepted Issue has been reproduced by MathJax team Browser Bug Upstream
Milestone
A future release

Comments

@sbutkaliuk
Copy link

sbutkaliuk commented May 10, 2016 •
edited
Loading

Issue Summary

When using css background-image for parent node of mathjax formula this image renders twice in WebKit based browsers.

Steps to reproduce

Open jsfiddle example with webkit based browser (Chrome, Safari)

Bug screenshot (Chrome)
image

How it's supposed to look (Firefox):
image

Technical details

MathJax Version: v2.6-latest
Browser: Any Webkit based (checked on Chrome and Safari)
Output: at least HTML-CSS, SVG
@dpvc dpvc added Accepted Issue has been reproduced by MathJax team Browser Bug labels May 12, 2016
@dpvc
Copy link
Member

dpvc commented May 12, 2016

I can reproduce the issue, and will look into it.

sbutkaliuk added a commit to sbutkaliuk/MathJax that referenced this issue May 13, 2016
@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
@sbutkaliuk sbutkaliuk mentioned this issue May 13, 2016
Closed
@pkra pkra added this to the A future release milestone May 17, 2016
@dpvc dpvc mentioned this issue May 17, 2016
Closed
@sbutkaliuk
Copy link
Author

@dpvc Have you reported this bug to webkit bug tracker?

@dpvc
Copy link
Member

dpvc commented Jun 7, 2016

@sbutkaliuk, no, I have not.

@pkra
Copy link
Contributor

pkra commented Jul 12, 2016

@dpvc do you have a minimal example for the blink/webkit bug?

@dpvc
Copy link
Member

dpvc commented Jul 12, 2016

do you have a minimal example for the blink/webkit bug?

This is pretty minimal (and doesn't involve MathJax). The double background appears in the first line, but not the second. It is caused by the temporary insertion of block-level material in the span (in this case, an <hr> tag). Reflow is forced by the use of offsetWith (without that, the image doesn't appear). The image doesn't get removed after the <hr> is removed. Firefox handles this correctly.

<!DOCTYPE HTML>
<html>
<head>
<title>Double Background Images</title>
<style type="text/css">
.image {
  padding-right: 1em;
  background: url("http://www.w3schools.com/images/html5.gif") right center no-repeat;
  background-size: 0.7em;
}
</style>
<script>
window.addEventListener("load",function () {
  var test = document.getElementById("test");
  var hr = test.appendChild(document.createElement("hr"));
  var width = hr.offsetWidth;
  test.removeChild(hr);
});
</script>
</head>

<body>

<span class="image">background image <span id="test"></span> and second copy</span>

<br/>

<span class="image">background image and no second copy</span>

</body>
</html>

@pkra
Copy link
Contributor

pkra commented Jul 13, 2016

Filed upstream at https://bugs.chromium.org/p/chromium/issues/detail?id=627736 and https://bugs.webkit.org/show_bug.cgi?id=159704

@pkra pkra added the Upstream label Jul 13, 2016
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 Browser Bug Upstream
Projects
None yet
Milestone
A future release
Development

No branches or pull requests
3 participants
@pkra @dpvc @sbutkaliuk