这两天帮某个项目处理后事,本以为可以轻松搞定,不成想又发现了一个bug.....
背景描述:ios5 提出了支持 position:fixed ,于是乎大家觉得让浮动的图层固定在屏幕最下方容易多了,赶紧用上吧。可是呢。。。页面上又有好多地方需要用到 scrollTo 控制滚动条移动,尤其是页面刚加载完毕需要让浏览器默认的 url 栏消失,一般都用 scrollTo(0,0) 或 scrollTo(0,1) 之类的。。。当这两者混合时就出现问题了, 浮动的div 虽然是你看到的在最下方,但是实际上这个div 内的触控点全都漂移了。
(画外音:通过这件事情,我们明白了一个道理:不能只相信你的眼睛....)
用 iphone 访问地址:http://ztree.me/issueTest/iosFixed.html (注意,此 bug 在 iphone5上不存在!应该是 ios6 系统修正了这个bug。)
你就可以重现上图的问题,看触屏的位置,那里没有任何内容,但是点击后会看到灰色阴影,点击后 alert 44,这说明 click 44 这个 li 的位置实际上漂移到了那里。
bug 描述:通过这个 Demo 可以基本确定 bug 的原因——利用 scrollTo 滚屏时,会导致 position:fixed 的图层视图不变,但对应的 DOM 实际响应位置却跟随 滚动条一起移动了,并未进行 fixed 的修正,从而导致了这个bug 的产生。
解决方案:经过简单测试发现,出现这种 bug 后,只需要用手移动一下屏幕就没问题了,所以尝试在 执行了 scrollTo 后,立刻改变 body 的高度,哪怕是1个像素也可,然后这个世界就清净了!!
不过记住了,要利用 setTimeout !想看源码,直接右键看演示页面的源码吧!
最后,如果你有更好的方法处理这个问题 或 发现我的测试出现了失误,也希望赶紧告诉我.....
分享到:
相关推荐
1. position:fixed 在 iOS 中的使用 2. native 和 h5 两个原因引起的抖动 3. 解决 native 抖动的方法 4. 解决 h5 抖动的两种方法 5. 使用 position:absolute 和 overflow-y:scroll; 实现滑动效果 6. 使用 transform:...
在网页设计和开发中,`position: fixed;` 是一个非常重要的CSS属性,它用于创建元素的固定定位。这个属性让元素相对于浏览器窗口保持固定的位置,即使页面滚动,该元素也会始终保持在屏幕上的同一位置。标题...
在微信小程序开发中,`position:sticky` 是一个非常实用的CSS样式,它结合了`position:relative`和`position:fixed`的特点,用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置,从而...
然而,当我们在 `iframe` 内部使用 `position: fixed;` 属性时,可能会遇到一些问题,即 `fixed` 定位在某些情况下可能失效。这通常与浏览器的渲染机制和 `iframe` 的跨域限制有关。本文将深入探讨这个问题,并提供...
本项目“xcode iOS 使用 boost::asio 的 demo”旨在展示如何在iOS应用中集成并使用Boost.Asio库。 Boost.Asio是Boost库的一部分,它提供了一个统一的接口来处理各种I/O操作,如TCP/UDP网络通信、文件流、信号处理等...
当与 `setiosflags(ios::fixed)` 或 `setiosflags(ios::scientific)` 结合使用时,可以更精确地控制小数点后显示的位数。 - **`setiosflags(ios::fixed)`**:使浮点数以定点形式输出。 - **`setiosflags(ios::...
庆幸的是,随着技术的发展,苹果在iOS 5及之后的版本中开始全面支持`position: fixed`,这极大地改善了移动Web应用的用户体验,同时也减轻了开发者的工作负担。现在,大多数现代设备上的Safari浏览器都可以无缝地...
position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的...
在iOS设备上,由于Safari浏览器的特殊渲染机制,经常会出现`fixed`定位失效的问题,尤其是在使用`Vue.js`框架构建的web应用中。这个问题主要表现为`fixed`元素不再固定于屏幕某个位置,而是随页面滚动而移动。针对这...
iOS开发试题大全:笔试面试一千题,包含1000道iOS试题和参考答案,题型包含:判断题、单选题,多选题和面试题。分为这套资料共分为"语法","常识","界面","iOS","操作","数据结构","多线程","网络","多媒体","安全"十...
Intermediate iOS Programming with Swift: iOS 10 and Swift 3 by Simon Ng English | 21 Jun. 2017 | ASIN: B0733C5K1D | 790 Pages | AZW3 | 37.88 MB Learn by Doing It's not just about the theory or syntax...
总的来说,解决iOS设备上`input`框弹出键盘后`fixed`定位失效的问题,关键在于理解和利用CSS的`position: sticky;`以及`-webkit-overflow-scrolling: touch;`属性。通过合理的布局和样式设置,我们可以确保在输入框...
5. **fixed 区域丢失**:在一些安卓设备及旧版iOS设备(如iPhone 4/iOS 5 Safari)中,页面跳转返回后,fixed 区域可能暂时消失。 6. **安卓低版本不支持 `position: fixed`**:许多安卓低版本设备及其自带浏览器不...
5. **测试和兼容性**:在实际项目中,务必在多种iOS设备和版本上进行测试,因为不同的iOS版本可能有不同的渲染效果。同时,也要关注其他移动平台,如Android和Windows Phone,确保样式的一致性。 在`iosselect-...
在iOS平台上实现音频直播涉及到多个技术领域,包括音频处理、网络传输、实时通信以及用户界面设计等。以下是对"音频直播-ios"这一主题的详细解释: 1. 音频处理: - AVFoundation框架:iOS中处理音频的核心框架,...
除了`ios::scientific`和`ios::fixed`,还有其他一些相关的标志,如`ios::showpos`(显示正号)、`ios::noshowpos`(不显示正号)、`ios::uppercase`(使用大写E表示科学计数法)等,可以根据具体需求组合使用。...
// ios_base :: fixed是设置cout为定点输出格式// ios_base :: floatfileld是设置输出时按照浮点格式进行输出,小数点后面有6位 例子: #include int main() { using namespace std; cout.setf(ios::fixed,ios_...
Phonegap项目中,使用js脚本调用ios中OC代码,需要使用Phonegap提供的一个脚本插件:cordova.js
iOS 7 Programming Fundamentals: Objective-C, Xcode, and Cocoa Basics by Matt Neuburg (Author) Publisher: O’Reilly Media (October 2013) Language: English ISBN-10: 1491945575 ISBN-13: 978-...
等价表示分别为 `io.setf(ios_base::fixed, ios_base::floatfield)` 和 `io.setf(ios_base::scientific, ios_base::floatfield)`。 #### setiosflags 和 unsetiosflags `setiosflags` 和 `unsetiosflags` 用于根据...