Panels and fixed-position header/footer - jquery-mobile

Question

I am trying to use the reveal animation for my panel. However, when jQuery Mobile runs the animation, the header does not slide over as far as the panel does so the header slightly overlaps the panel. See the image here: http://i.imgur.com/fjuDSRe.png
Here's my code:
<div data-role="page" id="taskdetailspage">
<div data-role="header" data-id="navbar" data-position="fixed" data-tap-toggle="false">
Back
<p class="title">Field Service Engineer</p>
Actions
</div>
<div id="taskholder" data-role="content">
</div>
<div data-role="content" id="directionsholder"></div>
<div data-role="panel" data-theme="a" id="taskdetailspanel" data-position="right" data-display="reveal"
data-position-fixed="true">
<h3>Actions</h3>
<ul data-role="listview" data-theme="a">
<li>Update Task Status</li>
<li><a id="directionsButton" href="#">Get Directions</a></li>
<li>Decline Task</li>
</ul>
</div>
<div id="updateStatusPopup" data-role="popup" data-theme="a" data-overlay-theme="a"
data-transition="fade" data-position-to="window">
<div data-role="header">
<h3>Update Task Status</h3>
</div>
<div data-role="content">
<form action="javascript: updateTaskStatus(currentTaskId);">
<fieldset data-role="controlgroup">
<legend>Current Status:</legend>
<input data-theme='a' name="updateStatus" id="arrived" value="Arrived" checked="checked" type="radio">
<label for="arrived">Arrived</label>
<input data-theme='a' name="updateStatus" id="wip" value="Work in Progress" type="radio">
<label for="wip">Work in Progress</label>
<input data-theme='a' name="updateStatus" id="completed" value="Complete" type="radio">
<label for="completed">Complete</label>
</fieldset>
<label for="statusNotes">Status Notes:</label>
<input name="statusNotes" id="statusNotes" value="" type="text">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="submit" value="Update" data-theme='a' id='confirmUpdateButton'></div>
<div class="ui-block-b"><a data-theme='a' data-role='button' data-rel='back'>Cancel</a></div>
</fieldset>
</form>
</div>
</div>
<div id="dialogcontent" data-role="popup" data-theme="a" data-overlay-theme="a"
data-transition="fade" data-position-to="window">
<div data-role="header">
<h3>Confirm Decline Task</h3>
</div>
<p>Are you sure you want to decline this task and remove it from your calendar?</p>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><a data-theme='a' href='#' id='confirmDeclineButton' data-role='button'>Decline</a> </div>
<div class="ui-block-b"><a data-theme='a' href='#' data-role='button' data-rel='back'>Cancel</a></div>
</fieldset>
</div>
I found one other question on SO with a similar description but the solution was unintelligible.
Thanks in advance!