title: IE10 reset the scrollbars (position to top-left) for a block (overflow:auto) after {display:none, display:block} sequence
body: <p>IE10 resets the scrollbars (position to top-left) for a block element if it is hidden and displayed. This block is part of a complex UI that shows and hides blocks from various places. The other browsers and IE versions works as expected (display back the block maintaing the scroll position as it was before hiding the block). See the issue here <a href="http://jsfiddle.net/8TLXh/2/" rel="nofollow">on jsfiddle</a>.</p>
  
  <p>HTML</p>
  
  <pre><code>Last item is visible (100).&lt;br&gt;
  TEST : click 
  &lt;input type="button" id="hide" value="Hide"&gt; then &lt;input type="button" id="show" value="Show"&gt;. Now item (1) is visible (IE10 only)
  &lt;div id="divu" style="margin-top: 10px; width:200px; height:500px; border:1px solid #888; overflow:auto;"&gt;
  
  &lt;p class="item"&gt;1&lt;/p&gt;
  &lt;p class="item"&gt;2&lt;/p&gt;
  &lt;p class="item"&gt;3&lt;/p&gt;
  &lt;p class="item"&gt;4&lt;/p&gt;
  &lt;p class="item"&gt;5&lt;/p&gt;
  &lt;p class="item"&gt;6&lt;/p&gt;
  &lt;p class="item"&gt;7&lt;/p&gt;
  &lt;p class="item"&gt;8&lt;/p&gt;
  &lt;p class="item"&gt;9&lt;/p&gt;
  &lt;p class="item"&gt;10&lt;/p&gt;
  &lt;p class="item"&gt;11&lt;/p&gt;
  &lt;p class="item"&gt;12&lt;/p&gt;
  &lt;p class="item"&gt;13&lt;/p&gt;
  &lt;p class="item"&gt;14&lt;/p&gt;
  &lt;p class="item"&gt;15&lt;/p&gt;
  &lt;p class="item"&gt;16&lt;/p&gt;
  &lt;p class="item"&gt;17&lt;/p&gt;
  &lt;p class="item"&gt;18&lt;/p&gt;
  &lt;p class="item"&gt;19&lt;/p&gt;
  &lt;p class="item"&gt;20&lt;/p&gt;
  &lt;p class="item"&gt;21&lt;/p&gt;
  &lt;p class="item"&gt;22&lt;/p&gt;
  &lt;p class="item"&gt;23&lt;/p&gt;
  &lt;p class="item"&gt;24&lt;/p&gt;
  &lt;p class="item"&gt;25&lt;/p&gt;
  &lt;p class="item"&gt;26&lt;/p&gt;
  &lt;p class="item"&gt;27&lt;/p&gt;
  &lt;p class="item"&gt;28&lt;/p&gt;
  &lt;p class="item"&gt;29&lt;/p&gt;
  &lt;p class="item"&gt;30&lt;/p&gt;
  &lt;p class="item"&gt;31&lt;/p&gt;
  &lt;p class="item"&gt;32&lt;/p&gt;
  &lt;p class="item"&gt;33&lt;/p&gt;
  &lt;p class="item"&gt;34&lt;/p&gt;
  &lt;p class="item"&gt;35&lt;/p&gt;
  &lt;p class="item"&gt;36&lt;/p&gt;
  &lt;p class="item"&gt;37&lt;/p&gt;
  &lt;p class="item"&gt;38&lt;/p&gt;
  &lt;p class="item"&gt;39&lt;/p&gt;
  &lt;p class="item"&gt;40&lt;/p&gt;
  &lt;p class="item"&gt;41&lt;/p&gt;
  &lt;p class="item"&gt;42&lt;/p&gt;
  &lt;p class="item"&gt;43&lt;/p&gt;
  &lt;p class="item"&gt;44&lt;/p&gt;
  &lt;p class="item"&gt;45&lt;/p&gt;
  &lt;p class="item"&gt;46&lt;/p&gt;
  &lt;p class="item"&gt;47&lt;/p&gt;
  &lt;p class="item"&gt;48&lt;/p&gt;
  &lt;p class="item"&gt;49&lt;/p&gt;
  &lt;p class="item"&gt;50&lt;/p&gt;
  &lt;p class="item"&gt;51&lt;/p&gt;
  &lt;p class="item"&gt;52&lt;/p&gt;
  &lt;p class="item"&gt;53&lt;/p&gt;
  &lt;p class="item"&gt;54&lt;/p&gt;
  &lt;p class="item"&gt;55&lt;/p&gt;
  &lt;p class="item"&gt;56&lt;/p&gt;
  &lt;p class="item"&gt;57&lt;/p&gt;
  &lt;p class="item"&gt;58&lt;/p&gt;
  &lt;p class="item"&gt;59&lt;/p&gt;
  &lt;p class="item"&gt;60&lt;/p&gt;
  &lt;p class="item"&gt;61&lt;/p&gt;
  &lt;p class="item"&gt;62&lt;/p&gt;
  &lt;p class="item"&gt;63&lt;/p&gt;
  &lt;p class="item"&gt;64&lt;/p&gt;
  &lt;p class="item"&gt;65&lt;/p&gt;
  &lt;p class="item"&gt;66&lt;/p&gt;
  &lt;p class="item"&gt;67&lt;/p&gt;
  &lt;p class="item"&gt;68&lt;/p&gt;
  &lt;p class="item"&gt;69&lt;/p&gt;
  &lt;p class="item"&gt;70&lt;/p&gt;
  &lt;p class="item"&gt;71&lt;/p&gt;
  &lt;p class="item"&gt;72&lt;/p&gt;
  &lt;p class="item"&gt;73&lt;/p&gt;
  &lt;p class="item"&gt;74&lt;/p&gt;
  &lt;p class="item"&gt;75&lt;/p&gt;
  &lt;p class="item"&gt;76&lt;/p&gt;
  &lt;p class="item"&gt;77&lt;/p&gt;
  &lt;p class="item"&gt;78&lt;/p&gt;
  &lt;p class="item"&gt;79&lt;/p&gt;
  &lt;p class="item"&gt;80&lt;/p&gt;
  &lt;p class="item"&gt;81&lt;/p&gt;
  &lt;p class="item"&gt;82&lt;/p&gt;
  &lt;p class="item"&gt;83&lt;/p&gt;
  &lt;p class="item"&gt;84&lt;/p&gt;
  &lt;p class="item"&gt;85&lt;/p&gt;
  &lt;p class="item"&gt;86&lt;/p&gt;
  &lt;p class="item"&gt;87&lt;/p&gt;
  &lt;p class="item"&gt;88&lt;/p&gt;
  &lt;p class="item"&gt;89&lt;/p&gt;
  &lt;p class="item"&gt;90&lt;/p&gt;
  &lt;p class="item"&gt;91&lt;/p&gt;
  &lt;p class="item"&gt;92&lt;/p&gt;
  &lt;p class="item"&gt;93&lt;/p&gt;
  &lt;p class="item"&gt;94&lt;/p&gt;
  &lt;p class="item"&gt;95&lt;/p&gt;
  &lt;p class="item"&gt;96&lt;/p&gt;
  &lt;p class="item"&gt;97&lt;/p&gt;
  &lt;p class="item"&gt;98&lt;/p&gt;
  &lt;p class="item"&gt;99&lt;/p&gt;
  &lt;p class="item selected"&gt;100&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>...
  JS</p>
  
  <pre><code>$(document).ready(function(){
  
      $('#hide').click(function(){
          $('#divu').hide();
      });
      $('#show').click(function(){
          $('#divu').show();
      });
  
      $('#divu').scrollTop($('#divu')[0].scrollHeight);
  });
  </code></pre>
  
  <p>...
  CSS</p>
  
  <pre><code>.item {
      margin:1px;
      padding: 2px;
      background: #eee;
  }
  
  .selected {
      background-color: #faa;
  }
  </code></pre>
  
  <p>UNACCEPTED KNOWN SOLUTION: I do not want this 'workaround' to store 'scrollTop'/'scrollLeft' and restore them back for my app in hundreds of source-code lines only for IE10 while the other browsers works just fine. The provided code is as simple as possible just to illustrate the issue. In my real app there are iframes involved and many HTML Elements. I do not hide/show directly the block (overflow:auto) but a parent many levels up in the DOM tree. The question is why IE10 behave like this (is this a known issue of IE10?) and how can I implement a shorter/smarter solution with a minimal intervention on the existing source-code.</p>