title: CTRL+F moves overflow:hidden <div>
body: <p>I am trying to create a slider but discovered that if a user were to use <kbd>CTRL</kbd>+<kbd>F</kbd>, the position and the <code>&lt;div&gt;</code> element's offset changed and so the slider no longer works the way is should.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div style="width:100px; height:150px;"&gt;
      &lt;div style="width:100px; height:100px; overflow:hidden;"&gt;
          &lt;div id="slider" style="width:200px; height:100px; right:0; position:relative;"&gt;
              &lt;div style="width:100px; height:100px; float:left;"&gt;visible&lt;/div&gt;
              &lt;div style="width:100px; height:100px; float:left;"&gt;hidden&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input id="sliderbuttonprev" type="button" style="float:left;" value="Prev"&gt;
      &lt;input id="sliderbuttonnext" type="button" style="float:right;" value="Next"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong> (jQuery):</p>
  
  <pre><code>$(document).ready(function() { 
      $("#sliderbuttonnext").click(function(){
          $("#slider").animate({right:"+=100px"});
      });
      $("#sliderbuttonprev").click(function(){
          $("#slider").animate({right:"-=100px"});
      });
  });
  </code></pre>
  
  <p>Is there a way to stop <kbd>CTRL</kbd>+ <kbd>F</kbd> finding the hidden sections?</p>
  
  <p><a href="http://jsfiddle.net/TaZL2/1/" rel="nofollow"><strong>jsFiddle Demo</strong></a></p>