Cross outs are positioned wrong

NSoiffer commented 6 years ago

Description

Cross outs are positioned wrong. They broke recently.

Steps to Reproduce

On mathlive.io, paste the following \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{x}=2

Actual behavior

Here's what it looks like:

The cross out should cover the 'x'.

NSoiffer commented 6 years ago

Not fixed. I updated and verified I had the fix (https://github.com/arnog/mathlive/commit/91fab3f77044e02b5c6dbc2f50747c0f43bef209), and it is still displayed as in the image in the bug report. Same is true for mathlive.io.

NSoiffer commented 6 years ago

The "fix" that didn't work was removing relative positioning:

-    result.setStyle('position', 'relative');
+    // result.setStyle('position', 'relative');

However, looking in the debugger, it still has position: relative. This is set in Span.prototype.toMarkup (in span.js) in

        if (this.svgOverlay) {
            if (!this.style) this.style = {};
            this.style['position'] =  'relative';
        }

If I comment that out, it looks better (a little big, but at least positioned well). However, I don't know what else uses svgOverlays and hence, what else is affected by this line.

arnog commented 6 years ago

svgOverlay is only used by enclose notation, so if it works better without it, it should be free of unwanted side effects. The root cause of the issue is still that the overall bounding box of the elements, particularly for stacked elements, doesn't account for the height of all the elements. Probably need to switch to a different way of doing this layout, but that would be a bigger fix. You can submit a PR with that change for now and I'll merge it in.

NSoiffer commented 6 years ago

Turns out that while removing the code works in the simple case when there is just a single char, it doesn't work if there are multiple chars. In the later case, the entire expr is crossed out when relative is unset.

Here's a screen shot (with debugger info) when relative is set:

Notice that in the upper right corner, the debugger show position: relative.

If I unset that in the debugger (the only change), here's what the result is:

I didn't think anything would change, but I double checked to make sure this same behavior happens even when I undid your change (https://github.com/arnog/mathlive/commit/91fab3f77044e02b5c6dbc2f50747c0f43bef209) (i.e, I uncommented setting position)

Looking at the spec for positioning, the absolute positioning on the SVG element is relative to the nearest positioned ancestor. When I remove relative, the nearest positioned ancestor becomes the grandparent of the SVG. I tried the other legal values for position on the parent of the SVG and none of them came close to right.

arnog / mathlive