Bug: Adding libraries broken in Chrome for Mac

[benlesh]

I'm a huge fan of this tool. Made the switch to a Macbook Pro, and now it's hard to use.

Steps to reproduce

1. Open the editor: http://plnkr.co/edit/?p=catalogue
2. Click the "add" magic wand on any library in the pane on the right.

   Symptoms:

   • Editor panel goes "blank".
   • No errors shown in console.
   • No failed network requests in Network tab
   • Unable to edit input.html in editor, while other files like script.js are fine.

     Chrome version details:

Key	Value
Google Chrome	33.0.1750.152 (Official Build 256984)
OS	Mac OS X
Blink	537.36 (@169182)
JavaScript	V8 3.23.17.23
Flash	12.0.0.77
User Agent	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537.36

[benlesh]

Also: if it helps, it does the same thing even if AdBlock is disabled.

[ggoodman]

@blesh I know this is an issue as other users have reported similar problems in filearts/plunker#63.

My issue is that I've been 100% unable to reproduce this bug.

Next time it happens, can you inspect the pane where the editor should be and see if the editor is still there (but 0 height or something)?

Thanks for the detailed report.

Geoff

[ggoodman]

Oh and I just deployed a new version with an updated copy of the ACE editor in hopes that this resolves the issue (not too optimistic on that).

My feeling is that this might be tied to the old jQuery layout plugin that I'm currently using. I've made an angular-based replacement but am working on a rewrite instead of trying to shoe-horn that into the current mess of code.

[benlesh]

... it gets weirder, now I'm looking at it, and I see the same thing, except when I'm inspecting the HTML. It's all there, in the HTML, BTW, and the styling looks okay. But it's "hidden" until I open the Elements inspector in Chrome. If I close the Dev Tools, it goes invisible again.

[ggoodman]

Damn gremlins.

[benlesh]

Update: It's only visible if the DevTools are open and docked to the Chrome window. If I have the dev tools open and undocked the HTML content for the editor is invisible again.

[benlesh]

... Okay, it's only visible if the DevTools are docked to the bottom of the Chrome window. It's still invisible if it's docked to the side.

[benlesh]

I found something... not sure where it originates, but it seems to fix the issue to some degree:

If you remove position:absolute from the following element, it suddenly shows up:

<div class="ui-layout-center ui-layout-pane ui-layout-pane-center" 
      style="position: absolute; margin: 0px; left: 0px; right: 0px; top: 0px; bottom: 0px; height: 764px; width: 563px; z-index: 0; display: block; visibility: visible;">

      <div class="plunker-ace"> [stuff] </div>

</div>

I have no idea where that's coming from, as I'm not familiar with your codebase. Seems to have something to do with some third-party "ui-layout" library I'd guess.

[benlesh]

Alternatively, removing z-index: 0 from the same node also seems to fix it.

[ggoodman]

OK deploying what I hope is a fix for this.

Geoff

On Wed, Apr 2, 2014 at 5:19 PM, Ben Lesh notifications@github.com wrote:

Alternatively, removing z-index: 0 from the same node also seems to fix it.

Reply to this email directly or view it on GitHubhttps://github.com/filearts/plunker_www/issues/31#issuecomment-39385154 .

[ggoodman]

Did that fix things by any chance?

On Wed, Apr 2, 2014 at 5:29 PM, Geoff Goodman ggoodman@gmail.com wrote:

OK deploying what I hope is a fix for this.

Geoff

On Wed, Apr 2, 2014 at 5:19 PM, Ben Lesh notifications@github.com wrote:

Alternatively, removing z-index: 0 from the same node also seems to fix it.

Reply to this email directly or view it on GitHubhttps://github.com/filearts/plunker_www/issues/31#issuecomment-39385154 .

[benlesh]

Yeah, that seems to have fixed it. What did you change?

[benlesh]

Did you remove the z-index? I didn't see a commit to this repo.