- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在一个移动网站上工作,在我的 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 产生的。因为 as fixed 告诉元素相对于浏览器保持在适当位置,所以它可以用于创建静态导航栏等。看不到您的 HTML,很难说出发生这种情况的确切原因,但这可能是由于浏览器在呈现固定在屏幕上的元素时出现问题。
我已经设法重现了您的问题,但除了使用固定位置之外别无选择。
这样看,当您滚动时,您是在告诉页面向上或向下移动,但是使用 position:fixed 抵消了这可能会导致冲突。据我所知,当使用您使用的 CSS 滚动时,所有浏览器都会出现轻微的闪烁,但这种情况太轻微以至于无法察觉,而且手机中的 GPU 速度较慢以及您创建的冲突会放大这种情况。
希望这有帮助:)
编辑:我找到了另一个可行的解决方案,尝试将 overflow:auto 添加到此 CSS 影响的元素。我不能告诉你这是否有效,因为你没有包含 HTML,但值得一试。 (这是在 https://stackoverflow.com/questions/1166816/firefox-3-5-fixed-position-scrolling-annoying-flicker 找到的,这不是同一个问题,而是一个类似的问题)
关于jquery - 在 Windows Phone 8 上的 IE 10 上滚动时网页闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25301057/
我开发了一个使用 mspn 服务的 windows phone 应用程序。它在 Windows 手机模拟器上运行良好。现在我想在 Windows Phone 设备中测试它。我有一个 Windows P
我正在考虑针对 Windows Phone 7 进行开发。为了测试我的应用程序,我需要能够模拟电话调用。在模拟器中可以吗? 最佳答案 不,不可能模拟您的应用程序被接收到的电话中断。还宣布为 the R
我看到 Windows Phone 8 支持 Windows Phone 7 应用程序。我在 Windows Phone 7 上开发了一些应用程序,我想在 Windows Phone 8 模拟器上运行
我正在Windows 8上使用Visual Studio2013。我有三个Windows Phone设备,lumia 620、920、1320,这些都是开发人员解锁的设备。 620设备已安装Windo
非常直接的问题。我的公司开发了一个 windows phone 7 应用程序,并一直在 windows phone 7 设备上对其进行测试。我们能否安全地假设同一个应用程序将向后兼容并在 Window
标题几乎概括了它。我已经编写了一个 Windows Phone 7 应用程序,现在我想将它部署到 Windows Phone 8 设备 (HTC Windows Phone 8X)。我已经注册并解锁了
我一直在开发 Windows Phone 8 应用程序,现在我想将其更改为 Windows Phone 8.1。我该怎么做? 是否应该创建一个新的 Windows Phone 8.1 应用并将所有现有
我有一个针对 Windows Phone 8 的应用程序。现在我想使用 this compression library其中指出: Supported Platforms: .NET Framewor
有什么区别Windows Phone 7.1 (NoDo) 和 Windows Phone 7.5 (芒果) ? 我已经为 Mango 安装了 SDK,但是当我尝试创建一个项目时,它显示为 7.1 版
我最近更新了我的 Visual Studio 2013,现在它允许开发 Windows Phone 8.1 应用程序。 但是现在,当我创建一个 Windows Phone 项目时,它是针对 WP 8.
我最近购买了 Lumia 630 双 SIM 卡,并一直在尝试注册我的手机以进行开发,但一直收到此错误“无法连接到手机。请确保通过 USB 传输服务的 Windows Phone IP 正在运行”。
我正在尝试使用 documentation from MSDN 在我现有的 Windows Phone OS 7.1 应用程序中支持新的 Windows Phone 磁贴功能。 .但是,我似乎无法通过
我在搜索如何启动Windows Phone 10模拟器时迷路了。 我已经做了: 我下载并安装了仿真器镜像(我知道flash.vhd文件的位置) 我正在运行Windows 8.1 x64专业版。 Hyp
我想制作像图片一样的动态磁贴。我该怎么做? 最佳答案 上面创建的图 block 很可能是在服务器端创建的。据说 Windows Phone 7.1 和 Windows Phone 8 之间发生了很多变
我刚刚将它安装在我的 Windows 8 上。它不是在 VM 上运行,而是在带有 bootcamp 的 macbook 上运行。 当我尝试模拟我的应用程序时,出现第一个错误: 但是后来我单击“重试”并
Microsoft 刚刚发布了结合了 Windows 8.1 和 Windows Phone 8.1 的 Windows App 8.1,因此您可以创建一个通用的应用程序。但是,将 Microsoft
是否有可用于WP7的日历控件(不是日期选择器和时间选择器)? 最佳答案 我还在CodePlex上启动了新项目。我刚刚研究了日历控件的Alpha版本。 http://wpcontrols.codeple
我在XAML中有一个文本框: .cs文件声明了以下事件: private void blah_OnKeyDown(object sender, KeyEventArgs e) {
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
我正在为Windows Phone 7创建一个多人游戏。如何调试模拟器的多个实例以便对其进行调试? 最佳答案 实际上,您可以同时运行Windows Phone 7模拟器的多个实例,甚至可以同时调试它们
我是一名优秀的程序员,十分优秀!