inline block content in a flex container not displaced

Internet Explorer incorrectly positions inline block content inside a flex container. The element gets positioned but its content does not. Here is an example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Microsoft Internet Explorer incorrectly handles display flex</title>
<style>
.C {
display: flex; flex-direction: row
}
.I {
position: relative;
}
.L {
position: relative;
left: 1.5em;
border: solid red thin
}
.L span {
display: inline-block;
}
</style>
</head>
<body>
<div class="C"><div><p>[</div><div>
<p><span class="I">
<span class="L">
<span>*</span></span>
</span ></div><div><p>]</div></div>
</body>
</html> 

 

Question Info

Last updated January 8, 2019 Views 215 Applies to:

<!DOCTYPE html>
  <title> ewww chuckle </title>

  <style id=S onload="setTimeout('S.sheet.deleteRule(0)')">
    .C>*, div.C { display: inline-block }
             .C { display: flex; flex-direction: row }
             .I { position: relative }
             .L { position: relative; left: 1.5em; border: solid red thin }
        .L span { display: inline-block }
  </style>

  <div class=C>

    <div>
      <p>[</p>
    </div>

    <div>
      <p>
        <span class=I>
          <span class=L>
            <span>*</span>
          </span>
        </span>
      </p>
    </div>

    <div>
      <p>]</p>
    </div>

  </div>

------------------------------------------------------------

<!DOCTYPE html>
  <title> ewww chuckle </title>

  <style onload="var load=function(style){
                   var Lspan=document.querySelector('.L span'),
                       f=function(){ style.sheet.deleteRule(0) },
                       g=function(evt){evt.target==this && f(f()) }
                   Lspan.addEventListener('transitionend',g)
                   f()
                 }.bind(null,this)
                 if (document.readyState=='complete') load()
                 else window.addEventListener('load',load)">

        .L span { color:transparent }
        .L span { transition:color .001ms }
    .C>*, div.C { display: inline-block; opacity:0 }

             .C { display: flex; flex-direction: row }
             .I { position: relative }
             .L { position: relative; left: 1.5em; border: solid red thin }
        .L span { display: inline-block }
  </style>

  <div class=C>

    <div>
      <p>[</p>
    </div>

    <div>
      <p>
        <span class=I>
          <span class=L>
            <span>*</span>
          </span>
        </span>
      </p>
    </div>

    <div>
      <p>]</p>
    </div>

  </div>

.
.

visit the only spam-free link that exists on ms-Answers

https://prunemaster.github.io/snippets/IE/IE-sniff.html

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

I reported the problem to MDN.
Christopher Yeleighton

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

It's a great bug.  I enjoyed it very much.

The two code samples in my previous post are workarounds for it.

The trick is to defer applying flex until after the container's css is already evaluated without it.

The first snippet uses style.onload + setTimeout for that purpose.

The 2nd takes a more definite approach.  Instead of setTimeout, it sets up a css transition in the most deeply nested element.  Then applies the flex after getting the transitionend event.

.
.

visit the only spam-free link that exists on ms-Answers

https://prunemaster.github.io/snippets/IE/IE-sniff.html

2 people were helped by this reply

·

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

btw.  maybe someone on MDN will have interest.  I had to remove checks for readyState=='interactive' and delay triggering the transition until the window 'load' event.  instead of 'DOMContentLoaded'.  due to Firefox 62 bugs.

(modify the 2nd sample with those parameters and see the transition events are unreliable with FF)

that's almost as bad as IE, which doesn't fire style.onload until after window load event.

.
.

visit the only spam-free link that exists on ms-Answers

https://prunemaster.github.io/snippets/IE/IE-sniff.html

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

I saw your posts, I just find code puzzles not helpful.  Thank you 🙂
Christopher Yeleighton

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.

Reply In reply to deleted message
Fix published, credit given.  Your retribution was disproportionate, as JavaScript is undecidable 🙂
Christopher Yeleighton

Did this solve your problem?

Sorry this didn't help.

Great! Thanks for marking this as the answer.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this response?

Thanks for your feedback.