title: Webpage flickering while scrolling on IE 10 on windows phone 8
body: <p>I am working on a mobile website and facing this weird flickering/shaking while scrolling my web page in IE10 on my windows phone 8. I have used the following css for my container that contains my web page:</p>
  
  <blockquote>
  <pre><code>position:fixed;
  top:0;
  left:0;
  overflow-y:scroll;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-y: snapInterval(0%, 100%);
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  -ms-touch-action: manipulation;
  -ms-user-select: none;
  z-index:0;
  </code></pre>
  </blockquote>
  
  <p>please suggest any other approach.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>The same is observed in Windows phone 8.1 with IE11</p>
  
  <p><strong>Update 2:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body onunload=""&gt;
      &lt;div class="popupBox"&gt;
          &lt;div class="popupContent"&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;
          &lt;/div&gt;
          &lt;div class="buttonContainer"&gt;
              &lt;a class="closePopup" id="btnClosePopup" href="#"&gt;Ok&lt;/a&gt; &lt;a class="closePopup margLeft02"
                  id="btnCancelConfirmBox" style="display: none;"&gt;Cancel&lt;/a&gt;
              &lt;div class="clear"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="body"&gt;
          &lt;div class="header"&gt;
              &lt;a href="#" class="vault_navOpener"&gt;
                  &lt;img src="menu_button.png" alt=""&gt;&lt;/a&gt;
              &lt;div class="width87"&gt;
                  &lt;h1 class="logo"&gt;
                      &lt;a href="#samplelink" id="IdHome"&gt;
                          &lt;img src="logo.jpg" alt=""&gt;&lt;/a&gt;
                  &lt;/h1&gt;
                  &lt;div class="vip_half"&gt;
                      &lt;span class="vip_level"&gt;
                          &lt;label id="lblVIPLevel"&gt;
                              4&lt;/label&gt;
                      &lt;/span&gt;&lt;span id="firstName"&gt;Hello Nishaa&lt;/span&gt;
                      &lt;div class="clear"&gt;
                      &lt;/div&gt;
                      &lt;a id="NotTo" class="npd_logout"&gt;Log Out&lt;/a&gt;
                      &lt;div class="clear"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h2&gt;
                  SweepLand&lt;sup&gt;®&lt;/sup&gt;&lt;/h2&gt;
              &lt;div class="main"&gt;
                  &lt;ul class="points"&gt;
                      &lt;li&gt;&lt;span class="width70"&gt;&lt;span id="a"&gt;Points Available:&lt;/span&gt;&lt;/span&gt; &lt;span id="b"
                          class="width30"&gt;421&lt;/span&gt;
                          &lt;div class="clear"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;span class="width70"&gt;&lt;span id="c"&gt;SweepLand Points in Play:&lt;/span&gt;&lt;/span&gt; &lt;span
                          id="c1" class="width30"&gt;4&lt;/span&gt;
                          &lt;div class="clear"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;span class="width70"&gt;&lt;span id="d"&gt;BidLand Points in Play:&lt;/span&gt;&lt;/span&gt; &lt;span
                          id="d1" class="width30"&gt;163&lt;/span&gt;
                          &lt;div class="clear"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;span class="width70"&gt;&lt;span id="e"&gt;Total Points:&lt;/span&gt;&lt;/span&gt; &lt;span id="f" class="width30"&gt;
                          588&lt;/span&gt;
                          &lt;div class="clear"&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class="clear bdr"&gt;
                  &lt;/div&gt;
                  &lt;h3&gt;
                      &lt;span id="ContentPlaceHolder1_lblFeaturedPrizes"&gt;Featured Prizes&lt;/span&gt;
                  &lt;/h3&gt;
                  &lt;div class="featured"&gt;
                      &lt;ul class="prizes" id="featured_prizes"&gt;
                          &lt;li&gt;&lt;a href="#samplelink"&gt;
                              &lt;img src="6883.jpg" alt="" onerror="ShowImage(this);"&gt;
                          &lt;/a&gt;
                              &lt;h4&gt;
                                  &lt;a href="#samplelink" class="blue"&gt;TestFeaturedSweep_25062014&lt;/a&gt;
                              &lt;/h4&gt;
                              &lt;span class="width60 clear"&gt;5 Prizes&lt;/span&gt; &lt;span class="width60"&gt;Enter By:&lt;/span&gt;
                              &lt;span class="width40"&gt;28/08/14&lt;/span&gt; &lt;span class="width60 s_points"&gt;Points Entered:&lt;/span&gt;
                              &lt;span class="width40 s_points_value"&gt;
                                  &lt;input id="hdnMinFPoints0" value="0" type="hidden"&gt;
                                  &lt;label id="lblFPoints0"&gt;
                                      2&lt;/label&gt;
                                  &lt;input id="txtFPoints0" value="2" type="text"&gt;&lt;/span&gt;
                              &lt;div class="clear"&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;a class="button_bid" id="btnFEdit0"&gt;Edit Points&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="clear"&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#samplelink"&gt;
                              &lt;img src="6883.jpg" alt=""&gt;
                          &lt;/a&gt;
                              &lt;h4&gt;
                                  &lt;a href="#samplelink" class="blue"&gt;TestFeaturedSweep_25062014&lt;/a&gt;
                              &lt;/h4&gt;
                              &lt;span class="width60 clear"&gt;5 Prizes&lt;/span&gt; &lt;span class="width60"&gt;Enter By:&lt;/span&gt;
                              &lt;span class="width40"&gt;28/08/14&lt;/span&gt; &lt;span class="width60 s_points"&gt;Points Entered:&lt;/span&gt;
                              &lt;span class="width40 s_points_value"&gt;
                                  &lt;input id="Hidden1" value="0" type="hidden"&gt;
                                  &lt;label id="Label1"&gt;
                                      2&lt;/label&gt;
                                  &lt;input id="Text1" value="2" type="text"&gt;&lt;/span&gt;
                              &lt;div class="clear"&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;a class="button_bid" id="A1"&gt;Edit Points&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="clear"&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#samplelink"&gt;
                              &lt;img src="6883.jpg" alt="" onerror="ShowImage(this);"&gt;
                          &lt;/a&gt;
                              &lt;h4&gt;
                                  &lt;a href="#samplelink" class="blue"&gt;TestFeaturedSweep_25062014&lt;/a&gt;
                              &lt;/h4&gt;
                              &lt;span class="width60 clear"&gt;5 Prizes&lt;/span&gt; &lt;span class="width60"&gt;Enter By:&lt;/span&gt;
                              &lt;span class="width40"&gt;28/08/14&lt;/span&gt; &lt;span class="width60 s_points"&gt;Points Entered:&lt;/span&gt;
                              &lt;span class="width40 s_points_value"&gt;
                                  &lt;input id="Hidden2" value="0" type="hidden"&gt;
                                  &lt;label id="Label2"&gt;
                                      2&lt;/label&gt;
                                  &lt;input id="Text2" value="2" type="text"&gt;&lt;/span&gt;
                              &lt;div class="clear"&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;a class="button_bid" id="A2"&gt;Edit Points&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="clear"&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="clear"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clear bdr"&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="content_footer"&gt;
              &lt;div class="footer"&gt;
                  &lt;p class="copyright"&gt;
                      ©2014
                  &lt;/p&gt;
                  &lt;!-- Footer links here --&gt;
                  &lt;ul style="width: 257px;" class="footerList"&gt;
                      &lt;li&gt;&lt;a href="#sampleLink" id="m"&gt;&lt;span id="m1"&gt;About Us&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#sampleLink" id="n"&gt;&lt;span id="n1"&gt;Join&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#sampleLink" id="o"&gt;&lt;span id="o1"&gt;Privacy Policy&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="noBdr"&gt;&lt;a href="#sampleLink" id="p"&gt;&lt;span id="p1"&gt;Terms of Use&lt;/span&gt; &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="clear noBdr"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class="clear margBt01"&gt;
                  &lt;/div&gt;
                  &lt;ul style="width: 203px;" class="footerList"&gt;
                      &lt;li&gt;&lt;a href="#sampleLink" id="q"&gt;&lt;span id="q1"&gt;Security&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#sampleLink" id="r"&gt;&lt;span id="r1"&gt;Unsubscribe&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="noBdr"&gt;&lt;a href="#sampleLink" id="s"&gt;&lt;span id="s1"&gt;Contact Us&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="clear noBdr"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class="clear margBt01"&gt;
                  &lt;/div&gt;
                  &lt;!-- Footer icons here --&gt;
                  &lt;a href="#sampleLink" id="t"&gt;
                      &lt;img class="left" src="group-logo.png" alt=""&gt;&lt;/a&gt; &lt;a href="#sampleLink" id="trust"&gt;
                          &lt;img class="right" src="mPrizeBoard.aspx_files/truste-logo-new.png" alt=""&gt;&lt;/a&gt;
                  &lt;div class="clear"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="overlay"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS of .body div containing the page is below:</p>
  
  <pre><code>.body
  {
      position:absolute;
      top:0;
      left:0;
      overflow-y:hidden;
      opacity:0;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      -webkit-overflow-scrolling: touch;
      -ms-touch-action: pan-y;
      -ms-user-select: none;
      z-index:0;
  
      -webkit-transition:opacity 1s ease-in-out;
      -moz-transition:opacity 1s ease-in-out;
      -ms-transition:opacity 1s ease-in-out;
      -o-transition:opacity 1s ease-in-out;
  }
  .body &gt; *
  {
      -webkit-transform: translateZ(0px);
      -webkit-text-size-adjust: 100%;
  }
  </code></pre>
  
  <p><strong>Note:</strong> <em>This is to specify that .body div gets its height and width dynamically which is always equal to the height and width of the window.</em></p>