This is only speculating, but maybe your additional media CSS confuses the iOS browser?
Code:
<style>
  @media screen and (min-width: 1200px) {#xr_xr {top:0px;}}
  @media screen and (min-width: 940px) and (max-width: 1199px) {#xr_xr {top:0px;}}
  @media screen and (min-width: 700px) and (max-width: 939px) {#xr_xr {top:0px;}}
  @media screen and (min-width: 480px) and (max-width: 699px) {#xr_xr {top:0px;}}
  @media screen and (max-width: 479px) {#xr_xr {top:0px;}}
 </style>
If I didn't miss someting all this does is forcing the xr_xr element to top. Shouldn't a simple
Code:
<style>
#xr_xr {top:0px !important;}
</style>
just do the same? Maybe it is worth a try?