[英]Webpage flickering while scrolling on IE 10 on windows phone 8
我正在移動網站上工作，面對這種奇怪的閃爍/搖晃，同時在我的Windows Phone 8上的IE10中滾動我的網頁。我使用以下css作為包含我的網頁的容器：
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;
請建議任何其他方法。
更新：
在帶有IE11的Windows Phone 8.1中也觀察到了相同的情況
更新2：
HTML：
<body onunload="">
<div class="popupBox">
<div class="popupContent">
</div>
<div class="clear">
</div>
<div class="buttonContainer">
<a class="closePopup" id="btnClosePopup" href="#">Ok</a> <a class="closePopup margLeft02"
id="btnCancelConfirmBox" style="display: none;">Cancel</a>
<div class="clear">
</div>
</div>
</div>
<div class="body">
<div class="header">
<a href="#" class="vault_navOpener">
<img src="menu_button.png" alt=""></a>
<div class="width87">
<h1 class="logo">
<a href="#samplelink" id="IdHome">
<img src="logo.jpg" alt=""></a>
</h1>
<div class="vip_half">
<span class="vip_level">
<label id="lblVIPLevel">
4</label>
</span><span id="firstName">Hello Nishaa</span>
<div class="clear">
</div>
<a id="NotTo" class="npd_logout">Log Out</a>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
<div>
<h2>
SweepLand<sup>®</sup></h2>
<div class="main">
<ul class="points">
<li><span class="width70"><span id="a">Points Available:</span></span> <span id="b"
class="width30">421</span>
<div class="clear">
</div>
</li>
<li><span class="width70"><span id="c">SweepLand Points in Play:</span></span> <span
id="c1" class="width30">4</span>
<div class="clear">
</div>
</li>
<li><span class="width70"><span id="d">BidLand Points in Play:</span></span> <span
id="d1" class="width30">163</span>
<div class="clear">
</div>
</li>
<li><span class="width70"><span id="e">Total Points:</span></span> <span id="f" class="width30">
588</span>
<div class="clear">
</div>
</li>
</ul>
<div class="clear bdr">
</div>
<h3>
<span id="ContentPlaceHolder1_lblFeaturedPrizes">Featured Prizes</span>
</h3>
<div class="featured">
<ul class="prizes" id="featured_prizes">
<li><a href="#samplelink">
<img src="6883.jpg" alt="" onerror="ShowImage(this);">
</a>
<h4>
<a href="#samplelink" class="blue">TestFeaturedSweep_25062014</a>
</h4>
<span class="width60 clear">5 Prizes</span> <span class="width60">Enter By:</span>
<span class="width40">28/08/14</span> <span class="width60 s_points">Points Entered:</span>
<span class="width40 s_points_value">
<input id="hdnMinFPoints0" value="0" type="hidden">
<label id="lblFPoints0">
2</label>
<input id="txtFPoints0" value="2" type="text"></span>
<div class="clear">
</div>
<div>
<a class="button_bid" id="btnFEdit0">Edit Points</a>
</div>
<div class="clear">
</div>
</li>
<li><a href="#samplelink">
<img src="6883.jpg" alt="">
</a>
<h4>
<a href="#samplelink" class="blue">TestFeaturedSweep_25062014</a>
</h4>
<span class="width60 clear">5 Prizes</span> <span class="width60">Enter By:</span>
<span class="width40">28/08/14</span> <span class="width60 s_points">Points Entered:</span>
<span class="width40 s_points_value">
<input id="Hidden1" value="0" type="hidden">
<label id="Label1">
2</label>
<input id="Text1" value="2" type="text"></span>
<div class="clear">
</div>
<div>
<a class="button_bid" id="A1">Edit Points</a>
</div>
<div class="clear">
</div>
</li>
<li><a href="#samplelink">
<img src="6883.jpg" alt="" onerror="ShowImage(this);">
</a>
<h4>
<a href="#samplelink" class="blue">TestFeaturedSweep_25062014</a>
</h4>
<span class="width60 clear">5 Prizes</span> <span class="width60">Enter By:</span>
<span class="width40">28/08/14</span> <span class="width60 s_points">Points Entered:</span>
<span class="width40 s_points_value">
<input id="Hidden2" value="0" type="hidden">
<label id="Label2">
2</label>
<input id="Text2" value="2" type="text"></span>
<div class="clear">
</div>
<div>
<a class="button_bid" id="A2">Edit Points</a>
</div>
<div class="clear">
</div>
</li>
</ul>
<div class="clear">
</div>
</div>
<div class="clear bdr">
</div>
<div class="clear">
</div>
</div>
</div>
<div class="content_footer">
<div class="footer">
<p class="copyright">
©2014
</p>
<!-- Footer links here -->
<ul style="width: 257px;" class="footerList">
<li><a href="#sampleLink" id="m"><span id="m1">About Us</span> </a></li>
<li><a href="#sampleLink" id="n"><span id="n1">Join</span> </a></li>
<li><a href="#sampleLink" id="o"><span id="o1">Privacy Policy</span></a></li>
<li class="noBdr"><a href="#sampleLink" id="p"><span id="p1">Terms of Use</span> </a>
</li>
<li class="clear noBdr"></li>
</ul>
<div class="clear margBt01">
</div>
<ul style="width: 203px;" class="footerList">
<li><a href="#sampleLink" id="q"><span id="q1">Security</span></a></li>
<li><a href="#sampleLink" id="r"><span id="r1">Unsubscribe</span></a></li>
<li class="noBdr"><a href="#sampleLink" id="s"><span id="s1">Contact Us</span></a></li>
<li class="clear noBdr"></li>
</ul>
<div class="clear margBt01">
</div>
<!-- Footer icons here -->
<a href="#sampleLink" id="t">
<img class="left" src="group-logo.png" alt=""></a> <a href="#sampleLink" id="trust">
<img class="right" src="mPrizeBoard.aspx_files/truste-logo-new.png" alt=""></a>
<div class="clear">
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="overlay">
</div>
</body>
包含該頁面的.body div的CSS如下：
.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 > *
{
-webkit-transform: translateZ(0px);
-webkit-text-size-adjust: 100%;
}
注意： 這是為了指定.body div動態獲取其高度和寬度，它總是等於窗口的高度和寬度。
令我感到驚訝的是，它以它的方式閃爍，但這種效果可能是通過使用position：fixed來創建的。 這將使得因為固定告訴元素相對於瀏覽器保持在適當的位置，因此它可以用於創建靜態導航欄等。 看不到你的HTML，很難確切地說出為什么會發生這種情況，但可能是由於瀏覽器在渲染固定到屏幕上的元素時出現問題。
我已設法復制您的問題，但找不到使用固定位置的替代方法。
這樣看，當你滾動時，你告訴頁面向上或向下移動，但使用position：fixed會抵消這可能導致沖突。 據我所知，所有瀏覽器在使用您使用的CSS滾動時都會遇到小閃爍，但是它太小而無法注意到，而且手機中的GPU速度慢，以及您創建的沖突會使這種情況放大。
希望這可以幫助 ：）
編輯：我找到了另一種可行的解決方案，嘗試將overflow：auto添加到此CSS影響的元素。 我不能告訴你這是否會起作用，因為你沒有包含和HTML，但它值得一試。 （這是在https://stackoverflow.com/questions/1166816/firefox-3-5-fixed-position-scrolling-annoying-flicker上找到的，這是不一樣的，但是一個類似的問題）
scrollTop（）沒有滾動到IE Windows 8手機上的正確位置
[英]scrollTop() is not scrolling to the correct place on IE windows 8 phone
將動畫平滑滾動到Windows Phone上IE中的頁面部分
[英]Smooth scrolling animation to sections of page in IE on Windows Phone
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.