`
zTreeAPI
  • 浏览: 345740 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于 IOS5 使用 position:fixed 的 bug

阅读更多

   这两天帮某个项目处理后事,本以为可以轻松搞定,不成想又发现了一个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 !想看源码,直接右键看演示页面的源码吧!

    最后,如果你有更好的方法处理这个问题 或 发现我的测试出现了失误,也希望赶紧告诉我.....

分享到:
评论

相关推荐

    详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

    1. position:fixed 在 iOS 中的使用 2. native 和 h5 两个原因引起的抖动 3. 解决 native 抖动的方法 4. 解决 h5 抖动的两种方法 5. 使用 position:absolute 和 overflow-y:scroll; 实现滑动效果 6. 使用 transform:...

    position_fixed

    在网页设计和开发中,`position: fixed;` 是一个非常重要的CSS属性,它用于创建元素的固定定位。这个属性让元素相对于浏览器窗口保持固定的位置,即使页面滚动,该元素也会始终保持在屏幕上的同一位置。标题...

    微信小程序----position:sticky

    在微信小程序开发中,`position:sticky` 是一个非常实用的CSS样式,它结合了`position:relative`和`position:fixed`的特点,用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置,从而...

    xcode iOS 使用 boost::asio 的 demo

    本项目“xcode iOS 使用 boost::asio 的 demo”旨在展示如何在iOS应用中集成并使用Boost.Asio库。 Boost.Asio是Boost库的一部分,它提供了一个统一的接口来处理各种I/O操作,如TCP/UDP网络通信、文件流、信号处理等...

    c++的一些问题

    当与 `setiosflags(ios::fixed)` 或 `setiosflags(ios::scientific)` 结合使用时,可以更精确地控制小数点后显示的位数。 - **`setiosflags(ios::fixed)`**:使浮点数以定点形式输出。 - **`setiosflags(ios::...

    iphone safari不支持position fixed的解决方法

    庆幸的是,随着技术的发展,苹果在iOS 5及之后的版本中开始全面支持`position: fixed`,这极大地改善了移动Web应用的用户体验,同时也减轻了开发者的工作负担。现在,大多数现代设备上的Safari浏览器都可以无缝地...

    position:sticky用法介绍及浏览器兼容性

    position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的...

    ios解决fixed定位失效并mintui的loadmore上拉加载

    在iOS设备上,由于Safari浏览器的特殊渲染机制,经常会出现`fixed`定位失效的问题,尤其是在使用`Vue.js`框架构建的web应用中。这个问题主要表现为`fixed`元素不再固定于屏幕某个位置,而是随页面滚动而移动。针对这...

    iOS开发试题大全:笔试面试一千题[常识篇]

    iOS开发试题大全:笔试面试一千题,包含1000道iOS试题和参考答案,题型包含:判断题、单选题,多选题和面试题。分为这套资料共分为"语法","常识","界面","iOS","操作","数据结构","多线程","网络","多媒体","安全"十...

    Intermediate iOS Programming with Swift: iOS 10 and Swift 3

    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...

    移动端吸顶fixbar解决方案.docx

    5. **fixed 区域丢失**:在一些安卓设备及旧版iOS设备(如iPhone 4/iOS 5 Safari)中,页面跳转返回后,fixed 区域可能暂时消失。 6. **安卓低版本不支持 `position: fixed`**:许多安卓低版本设备及其自带浏览器不...

    html5 IOS下拉框样式

    5. **测试和兼容性**:在实际项目中,务必在多种iOS设备和版本上进行测试,因为不同的iOS版本可能有不同的渲染效果。同时,也要关注其他移动平台,如Android和Windows Phone,确保样式的一致性。 在`iosselect-...

    音频直播-ios

    在iOS平台上实现音频直播涉及到多个技术领域,包括音频处理、网络传输、实时通信以及用户界面设计等。以下是对"音频直播-ios"这一主题的详细解释: 1. 音频处理: - AVFoundation框架:iOS中处理音频的核心框架,...

    iOS中input框问题

    总的来说,解决iOS设备上`input`框弹出键盘后`fixed`定位失效的问题,关键在于理解和利用CSS的`position: sticky;`以及`-webkit-overflow-scrolling: touch;`属性。通过合理的布局和样式设置,我们可以确保在输入框...

    以定点和科学计数法显示浮点类型数据

    除了`ios::scientific`和`ios::fixed`,还有其他一些相关的标志,如`ios::showpos`(显示正号)、`ios::noshowpos`(不显示正号)、`ios::uppercase`(使用大写E表示科学计数法)等,可以根据具体需求组合使用。...

    C-aa:C ++

    // ios_base :: fixed是设置cout为定点输出格式// ios_base :: floatfileld是设置输出时按照浮点格式进行输出,小数点后面有6位 例子: #include int main() { using namespace std; cout.setf(ios::fixed,ios_...

    Phonegap调用ios原生代码插件:cordova-ios.js

    Phonegap项目中,使用js脚本调用ios中OC代码,需要使用Phonegap提供的一个脚本插件:cordova.js

    iOS 7 Programming Fundamentals: Objective-C, Xcode, and Cocoa Basics

    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-...

    C 标准输入输出流的常用操纵符

    等价表示分别为 `io.setf(ios_base::fixed, ios_base::floatfield)` 和 `io.setf(ios_base::scientific, ios_base::floatfield)`。 #### setiosflags 和 unsetiosflags `setiosflags` 和 `unsetiosflags` 用于根据...

    苹果12.2版本position,jocation驱动

    5. **兼容性增强**:对于"position,jocation电脑版drivers",可能是指iOS设备与电脑之间的连接和同步,更新的驱动可能增强了iOS 12.2在不同操作系统(如Windows或macOS)上的兼容性,使用户在电脑上管理位置数据更加...

Global site tag (gtag.js) - Google Analytics