title: Positioning position: fixed elements correctly after pinch zoom
body: <p>Alright, this one is really stumping me. I'm looking for a way to reliably position a <code>position: fixed</code> element relative to a statically positioned element when after the user pinches to zoom.</p>
  
  <p>More details: this is a problem I am running into with my jQuery plugin, <a href="http://www.bigfootjs.com" rel="nofollow">Bigfoot</a>. Essentially, it turns footnotes into clickable buttons that generate popovers with tooltips pointing at the button. The tooltips must be <code>position: fixed</code>; the popover is placed directly after the paragraph containing the footnote link so that the same paragraph/ image/ other styling applies to the footnote contents by default.  This means that <code>position: absolute</code>, which is easier to work with on mobile, is basically out. The script also needs to be able to reliably calculate the space between the footnote button and the top/ bottom of the visible page (so that the popover can be positioned on top or bottom, depending on which has enough space) and to the right/ left of the visible page (so that the tooltip can be positioned to actually point at the popover).</p>
  
  <h2>What I've Tried</h2>
  
  <p>The thing that works for when the viewport is not zoomed is something along the lines of (with jQuery):</p>
  
  <pre class="lang-js prettyprint-override"><code>var $target = $(".target");
  $(".popover").css({
      top: $target.offset().top - $(window).scrollTop(),
      left: $target.offset().left
  });
  </code></pre>
  
  <p>However, this method fails to line up the elements when the viewport is scrolled. I can see what the zoom factor is by comparing the inner width (<code>window.innerWidth</code>) with the total width of the page (<code>document.documentElement.clientWidth</code>). I can also find the horizontal/vertical offsets with <code>window.pageXOffset/pageYOffset</code> (these numbers don't appear to be the actual amount of pixels the screen is scrolled horizontally when the viewport is zoomed, but I'm not really sure). However, I have not found any way to combine these pieces of information together to find the actual <code>left</code>/<code>top</code> offset values that will properly align the button with its tooltip.</p>
  
  <h2>Examples</h2>
  
  <p>To get an idea of what the script is actually supposed to be doing (and the weird misalignments that happen as a result of zooms on mobile) you can check out the buttons on the project page (<a href="http://www.bigfootjs.com" rel="nofollow">http://www.bigfootjs.com</a>). Something that correctly aligns the <code>&lt;div class='aimer'&gt;</code> (that is <code>position: fixed</code>) directly over the static <code>&lt;div class='target'&gt;</code> when the viewport is zoomed on mobile with the following example markup is what I'm looking for (at a minimum, needs to support current mobile Safari):</p>
  
  <h3>HTML</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="aimer"&gt;&lt;/div&gt;
          &lt;div class="target"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre class="lang-css prettyprint-override"><code>body {
      background-color: lightgray;
  }
  
  .target,
  .aimer {
      width: 1em;
      height: 1em;
      background-color: red;
      border-radius: 1em;
  }
  
  .target { margin: 10em 0 40em 6em; }
  
  .aimer {
      position: absolute;
      background-color: white;
  }
  </code></pre>
  
  <p>Thank you so much in advance for your help, and let me know if there is any other information I can provide!</p>