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

sbutkaliuk commented 8 years ago

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)

How it's supposed to look (Firefox):

Technical details

MathJax Version: v2.6-latest Browser: Any Webkit based (checked on Chrome and Safari) Output: at least HTML-CSS, SVG

dpvc commented 8 years ago

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

sbutkaliuk commented 8 years ago

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

dpvc commented 8 years ago

@sbutkaliuk, no, I have not.

pkra commented 8 years ago

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

dpvc commented 8 years ago

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 commented 8 years ago

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

mathjax / MathJax