Notice: Undefined index: public in /www/wwwroot/cuixinxin.cn/wp-content/plugins/wpjam-basic/includes/class-wpjam-core.php on line 137

Notice: Undefined index: public in /www/wwwroot/cuixinxin.cn/wp-content/plugins/wpjam-basic/includes/class-wpjam-core.php on line 137
ios26 safari fixed 不触底 卖坚果的怪叔叔
卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › H5在safari上fixed不触底bug?

H5在safari上fixed不触底bug?

坚果大叔
2025-11-14 19:25:48技术阅读 4,354

H5在ios26.01的Safari上出现了一个bug。

当你将页面中的元素设置为fixed,并且置底的时候,在页面滚动的时候浏览器底部地址栏自动缩放的情况下,会和地址栏中间出现大概10像素左右的空隙。同时还会将顶部元素顶到状态栏后面去。如下图:

H5在safari上fixed不触底bug?-卖坚果的怪叔叔

此问题还会出现在有input输入框的页面上。只会影响有这种类似底部悬浮的页面,如果没有则不会出现什么问题。

解决办法需要调整页面结构,带来的影响其实还是挺大的,你还需要去测试其他浏览器的兼容性问题。将页面固定整屏显示,中间内容通过scroll容器来滚动展示,可以解决此问题。

另外这个问题其实是ios的系统bug,并不是代码本身的逻辑错误。在最新的ios 26.1版本中该问题已经修复正常。

不得不吐槽,在safari中css的兼容性问题一直是个老大难!每次跟随着版本更新你都会看到不知道哪里冒出来的莫名其妙的bug!

H5在safari上fixed不触底bug?-卖坚果的怪叔叔

赞赏 赞(0)
2025年国庆的一些记录!
上一篇
初冬!暖日!东太湖慢行!
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

评论已关闭

热门文章
Mac防撤回插件
ES6入门之正则的扩展
做梦
🐱喵喵
重学JavaScript之面向对象的程序设计(继承)
CSS实现 Tab hover 下划线跟随
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
491 0 2
什么是 Skill?
2026-08-12 21:32:42
404 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
808 10 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,787 4 0
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2026 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
345
文章
171
评论
432
喜欢