Fix a weird bug with rlap

For some reason, when you have a nested elements that look like
  `display: inline-block; > position: relative; > position: absolute;`
then the `position: absolute;` element is shifted down a bunch. If there is
anything* else inside either of the other two elements, then this behavior
disappears. (This can be seen at [this fiddle](http://jsfiddle.net/qZXRr/). We
have this structure when we create `\llap` and `\rlap`s, and this weird behavior
So, to fix this I added an empty `display: inline-block;` span inside the llap
to fix this.

Test plan:
 - See that the new huxley image looks good
 - Test this in a bunch of browsers and see they also look good

Auditors: alpert
This commit is contained in:
Emily Eisenberg 2014-03-29 23:33:05 -04:00
parent b5ef06b52d
commit c22d8644cc
5 changed files with 19 additions and 7 deletions

View File

@ -339,13 +339,17 @@ var groupTypes = {
},
llap: function(group, options, prev) {
var inner = makeSpan([], [buildGroup(group.value, options.reset())]);
return makeSpan(["llap", options.style.cls()], [inner]);
var inner = makeSpan(
["inner"], [buildGroup(group.value, options.reset())]);
var fix = makeSpan(["fix"], []);
return makeSpan(["llap", options.style.cls()], [inner, fix]);
},
rlap: function(group, options, prev) {
var inner = makeSpan([], [buildGroup(group.value, options.reset())]);
return makeSpan(["rlap", options.style.cls()], [inner]);
var inner = makeSpan(
["inner"], [buildGroup(group.value, options.reset())]);
var fix = makeSpan(["fix"], []);
return makeSpan(["rlap", options.style.cls()], [inner, fix]);
},
punct: function(group, options, prev) {

View File

@ -275,16 +275,20 @@ big parens
width: 0;
position: relative;
> span {
> .inner {
position: absolute;
}
> .fix {
display: inline-block;
}
}
.llap > span {
.llap > .inner {
right: 0;
}
.rlap > span {
.rlap > .inner {
left: 0;
}

View File

@ -39,3 +39,6 @@ url=http://localhost:7936/test/huxley/test.html?m=\frac{a}{b}\text{c~ {ab} \ e}+
[KaTeX]
url=http://localhost:7936/test/huxley/test.html?m=\KaTeX
[RlapBug]
url=http://localhost:7936/test/huxley/test.html?m=\rlap{x}

View File

@ -0,0 +1 @@
{"py/object": "huxley.run.Test", "screen_size": {"py/tuple": [1024, 768]}, "steps": [{"py/object": "huxley.steps.ScreenshotTestStep", "index": 0, "offset_time": 0}]}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB