Mercury Editor 0.9 - content iFrame is behind editor controls, and wrong height

Question

I'm trying to integrate Mercury 0.9 with a Rails 3.2 project, but the content iFrame just refuses to be visible on the correct part of the page - it's behind the Mercury toolbar, and has a fixed height of 150 pixels.

When I look at the Mercury page, I see the following iFrame for the content:

<iframe id="mercury_iframe" name="mercury_iframe" class="mercury-iframe" 
frameborder="0" src="about:blank" style="left: 0px; visibility: visible; ">
</iframe>

When I look at the Mercury demo page [1] it looks like this:

<iframe id="mercury_iframe" class="mercury-iframe" 
frameborder="0" src="about:blank" style="top: 86px; left: 0px; 
height: 744px; visibility: visible; "></iframe>

Note the top and height styles - I don't have these for some reason. On the demo they change as the page is resized.

All the Mercury js and css appears to be loading, and the editable page has no styling of its own that could be interfering (not that it should matter within an iFrame).

I have tried both the mercury-rails gem and from Master on GitHub.

Any help appreciated!

[1] http://jejacks0n.github.io/mercury/

Answer 1

Thanks to Mercury author Jeremy Jackson for answering this.

The problem can be caused by using jquery > 1.7.7 with Mercury. I simply changed <%= javascript_include_tag 'jquery', 'admin/mercury' %> in layouts/mercury.html.erb to <%= javascript_include_tag 'jquery-1.7', 'admin/mercury' %> and all was fixed.

Rails 3.2 uses jQuery 1.9 which is what was being loaded. There is a copy of jquery-1.7.js included with the Mercury gem which the above change uses for Mercury. This doesn't interfere with the version in use by rails or on the page being edited.