jquery tabs sometimes set the iframe height to zero

Question

I have a page that uses jquery tabs with the content loaded via ajax

<script type="text/javascript">
    $(document).ready(function () {
        jqTabs("#tabs");
    });
</script>
.
.
.
<div id="tabs" class="fullWidth" style="visibility:hidden">
<li id="tabOne"><a href="#tab1">Tab1</a></li>
<li id="tabTwo"><a href="#tab2">Tab2</a></li>
<li id="tabThree"><a href="#tab3">Tab3</a></li>
</div>
.
.
.
<div id="tab1" title="tab1.aspx"></div>
<div id="tab2" title="tab2.aspx"></div>
<div id="tab3" title="tab3.aspx"></div>

This works fine, most of the time and I get the following HTML for the tab:

<div id="tab1" title="tab1.aspx">
<iframe frameborder="0" scrolling="no" src="tab1.aspx" width="100%" height="100%" style="height: 1234px;"></iframe>
</div>

Where 1234px is the height of the content. Great!

Occasionally and intermittently when one of the tabs is switched to, the height of the iFrame is set to 0.

<div id="tab1" title="tab1.aspx">
<iframe frameborder="0" scrolling="no" src="tab1.aspx" width="100%" height="100%" style="height: 0px;"></iframe>
</div>

This is frustrating as it's not consistent and if I use the browser dev tools to manually set the height to something else everything works fine. It's just the height hasn't been correctly set for some reason.

Can anyone point me in the right direction as to a) why this is happening and more importantly b) how to fix it!