JQuery Mobile hide/show header- issue with Safari

Testing issue on Safari that causes focusout to be incorrect

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://mathquill.com/mathquill/mathquill.css">
<script src="http://mathquill.com/mathquill/mathquill.min.js"></script>
<div id="foo" data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		 <p>Click here: <textarea id="js-result" style="width:80%;vertical-align:top"></textarea></p>
        <div>Result <p id="result-of-click"></p></div>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
         <div id="controlbuttons" style="display:none;" data-role="controlgroup" data-type="horizontal">
         <input data-icon="arrow-l" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveLeft" value="Left" />
         <input data-icon="arrow-r" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveRight" value="Right" />
         </div>
	</div><!-- /footer -->
</div><!-- /page -->

JavaScript

$("#js-result").focusin(function (eventObject) {
    $("#controlbuttons").show();
});

$("inputd").focusout(function (eventObject) {

    var relatedTarget = eventObject.relatedTarget;

    var message = "[DEBUG] - [FOCUSOUT] - Result relatedTarget = " + relatedTarget + " id=" + relatedTarget.id;
    
    $("#result-of-click").text(message);
    console.log(message);
    
    //check if we clicked on header button
    if( ($(relatedTarget).attr("name") == "btnMoveLeft")||($(relatedTarget).attr("name") == "btnMoveRight") )
    {
        //don't hide, and receive focus
    }
    else
    {
        $("#controlbuttons").hide();
    }
});