项目场景：

最近在做h5下载页，底部有一个下载按钮，平时遇到这种需求首先想到的就是position: fixed;,但是发现在ios手机上用百度浏览器打开以后，按钮会出现不显示想象，感觉很奇怪。微信浏览器打开微问题，只有百度浏览器会出现。

问题描述

刚开始以为是层级问题，但是把按钮层级加高也没起作用，然后就开始手机连本地调试，发现是fixed的原因，会在元素行内添加display: none的样式，然后试着通过操作dom给手动添加display: block,但是也没起作用。

原因分析：

发现是fixed的原因，，使用fixed时，百度浏览器（移动端）会在元素行内添加display: none的样式

解决方案：

提示：position: sticky

使用position: sticky，完美解决，但是这个属性有兼容问题，使用之前还是做好取舍。

 position: sticky;bottom: 0;

移动端ios使用fixed定位，偶现元素不显示问题（百度浏览器）相关推荐

在ios中fixed定位元素丢失，Date兼容NaN
Aphorism Preface 差不多有半年没有更新blog了, 现在在新的公司适应了,最近喜得一千金,也慢慢适应了新的生活. 今天更新一篇关于最近遇到的 ios fixed定位元素丢失 bug i ...
web端ios布局fixed元素软键盘唤起时fixed失效
在ios上做了一个简单的页面头部置顶底部置顶源码如下: <!DOCTYPE html> <html lang="en"> <head><m ...
Android11键盘弹出动画,(2016-11-04完美解决)移动端iOS第三方输入法遮挡底部input及android键盘回落后留白问题...
问题概述问题1:H5 web 移动端输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来- fixed属性失效了!满屏任性横飞, 如下图: 问题2:有几后来含些在到气时按式近篇来又的方浏消 ...
fixed定位导致的问题
深入探究iOS下fixed定位导致的问题: https://segmentfault.com/a/1190000010510291#articleHeader 先做笔记,后期持续更新内容
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（定位，显示与隐藏）
一.基础班学习路线三.CSS基础 1.CSS定位为什么需要定位定位组成静态定位static 相对定位relative 绝对定位absolute-与父级有关绝对定位脱标的不占有原来位置子绝父 ...
巧用伪元素解决fixed元素被百度浏览器屏蔽问题
背景在做这样一个活动页时,发现底部fixed定位的 button 元素在百度浏览器中展示不出来. Google后发现了这位小伙伴的文章针对前端在百度浏览器总的固定定位的问题文中提到: 这是百度浏 ...
fixed定位弹窗 ios手机兼容性滚动穿透问题
遇到了一个bug,就是在一个页面上用fixed定位写的一个弹框,弹框后面是一个半透明背景,然后在ios手机出现的怪异现象是一开始点击出现弹框是正常的,但是随着页面向上拉,超出屏幕长度后,弹框的主背景白 ...
ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法...
ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...
h5 ios中软键盘弹起后 fixed定位失效
position: fixed;在ios手机中会存在一个失效情况: 如果页面有输入框存在,点击输入框软键盘弹起后会发生一个现象: 1.针对当前内容高度小于屏幕高度时: 上下滑动页面时候,发现之前fix ...

移动端ios使用fixed定位，偶现元素不显示问题（百度浏览器）

项目场景：

问题描述

原因分析：

解决方案：

移动端ios使用fixed定位，偶现元素不显示问题（百度浏览器）相关推荐

最新文章

热门文章