Cordova页脚位置固定IOS11

Posted 2023-03-21

【中文标题】Cordova页脚位置固定IOS11

【英文标题】：Cordova footer position fixed IOS11

【发布时间】：2018-07-17 23:20:32

【问题描述】：

我创建了一个 Cordova/Phonegap 网站，一切正常，除了在带有 ios 11 的 iPhone X 上。问题是页脚位置固定在底部，但它不会一直呆在那里。如果我在应用程序上向下滚动，页脚会静止一秒钟然后到达底部。该问题仅出现在该手机上，而不出现在 android 或 Windows 上。

.footer-result
 background-color: $color-4
 bottom: 0px
 clear: both
 color: $color-1
 display: block
 font-family: "ff-kava-web-pro", sans-serif
 font-size: 1.3em
 left: 0
 right: 0
 padding: 10px 20px
 position: fixed !important
 width: 100%
 z-index: 9
 transform: translateZ(0)

example image app

【问题讨论】：

我们能看到 .footer-result 所在的 DOM 吗？

如果您在 IOS 11 上下载 Phonegap 并打开此 URL：192.168.123.48:3000。如果您通过网站而不是通过 Phonegap 访问它，它会完美运行。

URL 对我不起作用 - 可能是因为防火墙 - 我不知道 :)

基本上我很想看看你的 .footer-result 存在于哪个 div （或 div 堆栈）中。有时 iOS 上的固定元素如果嵌套在其他 div 中就不能很好地工作。 ...

你可以试试：3951cac3.ngrok.io

【参考方案1】：

好的 - 那里有很多 CSS 文件 - 很难快速调试，但我认为如果你将固定的页脚元素移动为“body”或 div 类“views”的简单子元素，那么该元素应该真正修复至底部。我已经看到 iOS 中的固定元素在其父 div 具有绝对或相对位置时跳跃或定位不正确。 你也可能想看看这个页面： https://stanko.github.io/ios-safari-scoll-position-fixed/

祝你好运！

【讨论】：

感谢您的回复！ CSS 已经有了 transform 属性，但我没有帮助。

好的 - 在这种情况下，我建议尝试将页脚 div 直接作为 body 的子级，看看它是否为您解决了问题。

谢谢！这就是解决方案。