ios 浏览器 fixed定位

2024-09-05

解决IOS移动端固定定位失效问题

根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上不起作用. <div class="header">头部</div> <div class="main"> <div class="content">  </div> </div> <footer class="fo

问题: IOS 中所有浏览器,当页面上的输入框获得焦点时,呼出键盘. 页面底部的导航栏(position:fixed)会被键盘顶到页面的中间. 而当输入框失去焦点时,导航栏停留在页面中间,造成页面错乱. 原因: IOS系统,对position:fixed支持不好. 解决: 输入框失去焦点时,让页面滚动1px. 代码: $(function(){ // 输入框事件绑定 $('input').on('focus', function () { setTimeout(function () { $('

【原】IOS兼容性之APP内fixed定位头部跳动

兼容现象: 在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本里边,问题来了,当我们快速滑动页面的时候,页面滚动期间,这个fixed定位的头部会随着页面的滑动滑上去,等到上滑动作执行完毕时,头部才又出现.这个问题在安卓及ios11以下的版本都是没有的. 解决: 直接将这个页面控制在一个盒子里边去滑动,头部相对于这个盒子进行绝对定位.但是这样写带来的副作用就是除

IOS上z-index和fixed定位无效

IOS上z-index和fixed定位无效在该元素上加: -webkit-transform:translateZ(1px); -moz-transform:translateZ(1px); -o-transform:translateZ(1px); transform:translateZ(1px); 参考文档: https://stackoverflow.com/questions/20832531/mobile-safari-positionfixed-z-index-glitch-wh

我是如何通过debug成功甩锅浏览器的：解决fixed定位元素，在页面滚动后touch事件失效问题

如果你关注我应该知道,我最近对PC端页面进行移动适配.在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart 事件替代传统的 click 事件,这过程中我遇到了一些小问题,并成功解决了,你可以通过这篇文章查看具体的情况. 所谓祸不单行,在即将发布上线的时候,我又突然发现使用 touchstart 事件后,移动设备上出现了另一个比较诡异的现象:当用户滚动页面后,原本绑定在fixed定位的navbar元素上的

HTML中设置在浏览器中固定位置fixed定位

之前的博文 HTML布局排版之制作个人网站的文章列表,中链接到的文章本身,也需要返回到列表主页,可在每个文章页面加导航条,也可以只加个返回到列表主页的链接.刚开始是想在博文最下方,加个返回文章列表的链接,但是有些博文很长,需要到最下方再返回比较麻烦,如果在每个页面加导航条也可以,但是长博文需要回到上面再点导航条,也有点麻烦.如果有个方法在页面滚动条滚动后,还能让某元素固定在浏览器的固定位置就比较方便了,查看了下css样式里的position定位,里面个fixed定位. 把返回这个链接用fixed

ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法

ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function(){ $('.footerssss').css({ 'position':'absolute' }) }) $("input").blur(function(){ $('.footerssss').css({ 'position':'fixed' }) setTimeout(function

web移动端input获得光标Fixed定位失效解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <<span>body class="layout-fixed&quo

移动端踩坑之旅-ios下fixed、软键盘相关问题总结

最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关知识.让我们一起来看一下我怎么挣扎出这个大坑的. 一.背景先看一下要做什么,也就是一个文章评论的版块,下面依次有输入框,点赞,收藏等 .大概长下面这个样子: 要求也很常规,吸底,输入评论提交.那么上来就输代码吧. 二.ios下fixed布局关于这种吸底操作,上来就直接选用fixed了,这种场景舍

safari浏览器fixed后，被软键盘遮盖的问题—【未解决】

safari浏览器fixed后,被软键盘遮盖的问题,已经有好多人问相关的问题,应该是问的角度不一样,还的再次提出咯. 问题描述测试环境:ios 10.2/10.3 简单来说就是在html5页面中底部有个fixed的区域,如图在点击输入框的时候,软键盘弹出,遮盖了fixed区域(这里页面整体上移了),如图但是当你点击"完成"让软键盘收起,再次点击输入框的时候,what?一切正常了-!如图(就是要这样子的嘛,之后收起弹出软键盘都正常了,不会遮盖fixed底部区域了!) 但是,但是,还

ios下fixed回复框bug的解决方案

前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中间去. 后来才知道这是ios下一个普遍的bug,所以我决定把原因和解决方案整理一下,以方便后人. 网上有的人说用那个iscroll.js来解决,不过那样会出现很多样式上的冲突,而且为了一个fixed的bug就动用一个js,未免有点大材小用了. 原因 ios下面,软键盘唤起后,页面的 fixed 元素

文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位

文件正在上传的转圈圈gif图片一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验.  <div id="mask-div"></div> <div class="download-progress"> <img src="../resource/skin/default/images/thirdPlatform/progress.gif&qu

fixed定位兼容性

不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持. 但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了. 可以看到,fixed定位的元素跑到中间去了,这种问题一般出现在页面有scrollTop并且输入框获得了焦点的情况下! 怎么解决这种问题呢?我目前知道的主要有三种办法,假设HTML代码结构为: <!DOCTYPE html> <html> <head> <meta chars

fixed定位文本框引发的问题

<body>  <main id="J_box">  </main>  <footer id="J_footer"> <input type="text" placeholder="" id=&q

内联元素于与块元素的转换相对定位、绝对定位以及fixed定位 Z轴覆盖

今天上午学习了内联元素于与块元素的转换个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素display:block 将元素隐藏display:none Z轴是对于用户的视角z-index: 50; 下午学习的相对定位.绝对定位以及fixed定位: fixed定位也就是浏览器的浏览页面定位,用处比较大,相对定位和绝对定位处于辅助级, 相对定位:相对于元素本身应该在的位置移动绝对定位:距离父类

关于苹果手机微信端 position: fixed定位top导航栏问题

在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-sca

关于iframe中使用fixed定位的一些问题

先来看看position: fixed:的定义:生成绝对定位的元素,相对于浏览器窗口进行定位: 但是在iframe中使用fixed定位,实际上是相对于iframe窗口进行定位,原因在于iframe类似于创建了一个浏览器窗口,在使用一些获取鼠标位置以及元素位置等方法的时候把iframe当作浏览器窗口来处理就行. 以下是一些在iframe中使用fixed需要考虑的常用js事件对象属性与方法: 获取鼠标的位置: e.clientY // 获取鼠标在浏览器视窗的Y坐标,在iframe中相对于iframe

关于fixed定位的一些错误看法纠正

之前由于一些误导,一直感觉fixed这个定位在ie8下面是会出现兼容问题的,今天发现这个想法太绝对了,它只是在ie7 8 的怪异模式下面会出现兼容问题解决这个问题可以通过用absolute来模拟fixed来模拟fixed定位来解决这个兼容的问题,但是最好的办法还是强制浏览器使用标准模式渲染页面,毕竟这个问题只是在怪异模式下面会出现,使用absolute模拟太麻烦了. <meta http-equiv="X-UA-Compatible" content="edge&qu

ios浏览器调试踩坑（1）----mescroll.js和vue-scroller

主要记录在ios浏览器出现触摸无限加载的情况使用vue-scroller和mescroll.js/mescroll.vue先踩ios浏览器默认滑动会影响mescroll的方法调用. 首先给公共js加入以下代码禁用我们的页面在ios浏览器下会滑动上下页面. <script> //禁止ios手机双击放大以及缩小 window.onload = function () { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touc

ios position:fixed 上滑下拉抖动

ios position:fixed 上滑下拉抖动最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上会出现上滑或者下拉的时候头部或者底部被带下来,然后过一会自己在滑上去,感觉很卡顿,感官很不好,最后发现是position:fixed的兼容问题百度找了两个方案分别用了一下方案一 transform: translateZ(0); -webkit-transform: translateZ(0);

关于IOS浏览器：document,body的click事件触发规则

今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是讲原理,这里写个简单的代码,大家可以复制到自己页面中去实验: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi