Safari Mobile 应用横幅更改视口高度

Question

地址栏下方的横幅正在改变高度，甚至不是 DOM 的一部分。

Position: fixed底部的元素被隐藏。

您可以通过以下方式查看

1. 打开https://www.ounass.ae/clothing/中Safari - iOS smart phones
2. 向下滚动查看此应用横幅
3. 单击Filter By按钮。

Answer 1

我有同样的问题，但这可能不是解决方法，而是解决方法。

const updatePositionOfCtaButton = () => {
  if (
    window.navigator.userAgent.toLowerCase().includes('safari') &&
    window.navigator.userAgent.toLowerCase().includes('mobile') &&
    document.documentElement.clientHeight > window.innerHeight &&
    !document.hidden
  ) {
    document.querySelector('.callToActionButton').style.bottom = '44px';
  } else {
    document.querySelector('.callToActionButton').removeAttribute('style');
  }
}
window.addEventListener('scroll', updatePositionOfCtaButton);
document.addEventListener('visibilitychange', updatePositionOfCtaButton);

我们还可以transition给CTA按钮添加一点动画

.callToActionButton {
  transition: bottom 0.16s linear 0s;
}