卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › H5在safari上fixed不触底bug?

H5在safari上fixed不触底bug?

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

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年国庆的一些记录!
上一篇
在小程序中查看

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

再想想
暂无评论
搜你想看的
聚合文章
已下架
JavaScript之继承(未完待续)
Python基础教程之字符串和编码
instanceof和typeof的区别
闲言碎语
Memos
我用Trae做了一个一键同步热点要闻到公众号的工具
2025-10-15 19:53:39
476 0 0
使用uview-plus遇到的一些问题!
2025-09-19 20:21:59
1,319 0 1
Nuxt3中的水合是什么?以及使用中的一些总结!
2025-08-30 19:42:35
1,562 0 0
Element Plus Upload 添加支持拖拽排序~
2025-07-30 20:55:55
1,260 1 0
  • 0
  • 0
博主

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

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

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
332
文章
144
评论
404
喜欢