CODEWITHSUNDEEP
htmlcssgoogle-chromeflexbox
David Scherfgen
David Scherfgen

Reputation: 333

Can "display: inline-block" be emulated using flexbox?

Question: Is there any way to perfectly emulate inline-block using inline-flex and some other properties? Ideally, without changing the DOM, since in my case it is generated by MathJax and I'd prefer not having to alter its source code.

JSFiddle: https://jsfiddle.net/a9508cu6/1/

Why I want to do that: I'm rendering mathematical formulas using MathJax, which creates a highly nested structure of <span> elements, most of which have display: inline-block set. Under some circumstances, Chrome completely freezes when performing a scroll touch gesture on those <span> elements. This bug exists in all Chrome versions I tested, including Beta, Dev and Canary, and is currently preventing me from releasing my web application, so I'm looking for a workaround. Of course I'm going to report the bug, but I'm afraid it will take time to fix it and even more time to distribute the fix.

I found that using inline-flex doesn't trigger the bug in question, so I'm trying to replace inline-block with inline-flex while not altering the visual result.

The original CSS rule in MathJax is like this:

.mjx-math * {
    display: inline-block;
}

I replaced it with:

.mjx-math * {
    display: inline-flex;
    align-items: baseline;
}

That kind of works, but not quite. The vertical positioning of some elements is broken now.

Original result with display: inline-block:

enter image description here

Result with display: inline-flex; align-items: baseline:

enter image description here

As you can see, the "7" and the "2" are shown at the wrong vertical position.

Upvotes: 1

Views: 1149

Answers (3)

Alohci
Alohci

Reputation: 82976

When you make every element in a sub-tree display:inline-flex every element not at the root of that sub-tree will be a flex item and therefore blockified.

This means that those elements will be computed display:flex, and so won't be affected by the vertical-align property, which is used by MathJax to position the "7" and the "2".

So without reverse engineering MathJax in detail to see what values can be used where, I don't believe this approach is possible.

Upvotes: 2

Azu
Azu

Reputation: 1550

From what I tried, it worked only with this class:

#new .mjx-math  {
  display: inline-flex;
}

Upvotes: 0

A Haworth
A Haworth

Reputation: 36426

Would a slighty more nuanced approach work?

This code looks for spans with inline-block and sets them to have a class which is display: inline-flex and align-items: baseline.

I don't have enough info to try it out on an example which fails on touch scroll so cannot say whether it will help your use case, but it does seem to allow the formula in the question to be displayed correctly.

<style>
/* remove the setting you have and replace with this */
.test  {
  display: inline-flex;
  align-items: baseline;
}
</style>

<button onclick="testinit();">
Click me to change inline-block spans to inline-flex and align-items: baseline</button>
  <div>
    \( \sqrt[7]{\log_2\left(x\right)} \)
  </div>
 <script>
  function testinit() {const spans = document.getElementsByTagName("span");
let count = 0;
for (let i = 0; i < spans.length; i++) {
  if (window.getComputedStyle(spans[i]).display == 'inline-block') {
    spans[i].classList.add('test');
    count++;
  }
}
alert('Number of spans changed: ' + count);
}
</script>

Upvotes: 1

Related Questions