Running code in sandbox more than once fails in Safari

[ErikSwan]

In Safari 7 (possibly other versions), attempting to run a code sandbox more than once causes the output to disappear.

Steps to reproduce:

1. Browse to any page with a code editor.
2. Input the following code: console.log('test');
3. Go to the menu, and click Run code. The output appears below the code editor as expected.
4. Go to the menu again, and click Run code. The output disappears. Attempting to run the code again does not produce any output.

[marijnh]

I haven't been able to reproduce this on Safari 6 -- the code is run repeatedly, and console output is present after each run. Unfortunately, I do not have a device that can run Safari 7.

Are you seeing any error messages in the JS console? (option+cmd+i)

[ErikSwan]

There aren't any errors in the console.

I did a bit of investigation, and it looks like it is not actually a JavaScript issue but a DOM/rendering issue. On the second run, the output div remains in the DOM with the correct content, but for some reason is not in the layout rendered by the browser (I can inspect it and everything, but it just doesn't show up in the rendered output).

Changing something in the CSS inspector (even just disabling and enabling something) causes it to show up again immediately. Oddly, I also tried to force a layout/reflow using the console (doing getComputedStyle() on the parent element), but this didn't work.

Does this bring anything to mind? If not, I might have some time later this week to investigate this.

[marijnh]

Well, that sounds like a safari bug. If you can come up with a tweak to the HTML or CSS that avoids it, I'd be very grateful (since I can't reproduce so far, I have no idea what might be triggering the problem)

[ErikSwan]

It's definitely a Safari bug. The only thing I've tried so far that seems to be able to fix it (at least from an interactive console) is doing:

var el = document.getElementsByClassName('sandbox-output')[0],
    parent = el.parentElement;
parent.removeChild(el);
parent.appendChild(el);

Attempting to force a style calculation or reflow with the element still in the DOM does not work, oddly. I'll work on this and let you know what I come up with. Ideally I would also like to find a MWE for reproducing the bug in Safari, but since Apple doesn't have an open bug tracker I don't really want to put in a ton of work to reproduce something that might already have been reported.

[marijnh]

Hi Erik -- did you ever find time to look into this more deeply?

[ErikSwan]

Marijn — no, I haven't been able to get more insight into what is happening yet. I'll let you know if I do, though.

[abhisekp]

Problem can be reproduced in Xombrero Browser for linux.

[bassu]

Same issue here. Safari 8.0 on OS X Yosemite 10.10.

[marijnh]

Attached patch fixes the problem in Xombrero (which is built on the same Webkit as Safari). I don't have a Mac around to test right now, could someone confirm that it also helps on OS X?

[drewvolz]

I can confirm that the patch works in Safari 8.0 (10600.1.25) on Mac OS X Yosemite (10.10).

[marijnh]

Wonderful!

[bassu]

Although the workaround works but it makes ch#13 to print an empty object when console.log(document.body); is called in Safari!

[marijnh]

Where (and why) are you calling console.log(document.body);. And what does this empty object look like? null or just an object with no enumerable properties ({})?