Inline-Block turns to Block element after exiting Fullscreen -Chrome

Question

I've made a website with inline-block elements and one button to make one of those elements fullscreen. After exiting fullscreen in google-chrome the inline-blocks will be presented in two lines similar to normal block elements. This
I hope this example will clarify the problem:

html:

 <div id="test" style="display:inline-block">hel</div><div style="display:inline-block">lo</div>
 <br>
 <button onclick="launchFullscreen('test')">launchFullscreen</button>

JS:

      function launchFullscreen(id) {
            var element = document.getElementById(id);
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }

After exiting fullscreen google-chrome displays the text in two lines. Instead of
"hello"
it's displayed this way
"hel
lo".

I would like to use the inline-block attribute. Did I make a mistake or is this a webkit bug? Is there a solution for this problem?

Answer 1

Seems to be an (unsolved) timing problem..
It can't be fixed by (re)setting the two boxes display to inline-block .

But can, by first setting them to none or block and then back to inline-block .
- But not right away, both steps need to be delayed using setTimeout :

$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange",function()
    {
    if (document.fullScreen ||
        document.webkitIsFullScreen ||
        document.mozFullScreen || 
        document.msFullscreenElement || 
        document.fullscreenElement)
        {
        console.log("in fullScreen")
        }
    else
        {
        console.log("fullscreen nomore")
        setTimeout(function()
            {
            $("#box1,#box2").css("display","block")
            setTimeout(function()
                {
                $("#box1,#box2").css("display","inline-block")
                }, 0)
            }, 0)
        }
    })

It's not pretty, but it does work (for me) and doesn't break anything in Firefox : )