在有很多 swipers 的页面上的移动 chrome 中跳转粘性页脚 [英] Jumping of a sticky footer in the mobile chrome on a page with a lot of swipers

问题描述

我有一个包含大量图像内容的项目，在移动设计中有很多带有照片和滑动功能的块 https://swiperjs.com.在移动设备的chrome浏览器中，当有很多带有swiper的元素时，固定位置的footer在地址栏隐藏或显示的瞬间开始上下跳跃.
带有移动设备错误的 Gif:https://giphy.com/embed/PJ4sLlwts4ziBbCqcX
..在平板电脑上:https://giphy.com/gifs/ZvVenstP3fTHtKlqGs

I have a project with a lot of image content, and in the mobile design there are a lot of blocks with photos and swiper functionality https://swiperjs.com. In the chrome browser on mobile devices when there are a lot of elements with swiper, footer with fixed position starts jumping up and down in the moment of hiding or showing of the address bar.
Gif with the bug on mobile: https://giphy.com/embed/PJ4sLlwts4ziBbCqcX
..on tablet: https://giphy.com/gifs/ZvVenstP3fTHtKlqGs

Android 手机上的其他浏览器如 iPhone 上的 Safari 或三星 Internet(具有隐藏地址栏的相同功能)没有问题.
三星互联网 Gif:https://giphy.com/gifs/AALHRFlsn9Ow7WrtMK

There are no problems in other browsers like Safari on iPhone or Samsung Internet (which has the same feature with hiding of the address bar) on Android mobile.
Gif with Samsung Internet: https://giphy.com/gifs/AALHRFlsn9Ow7WrtMK

我认为问题的存在是因为复杂 html 结构的渲染滞后或像隐藏图片这样的繁重 js 处理，也许这不完全是 swiper lib 的问题.但是这个问题只出现在手机chrome中.

I suppose the problem exists because of the lag in the rendering of a complex html structure or heavy js-processing like hidding of pictures and maybe this is not exactly a problem of swiper lib. But this problem appears only in the mobile chrome.

我在使用swiper"的 instagram 上也看到了类似的问题；功能:https://giphy.com/gifs/QU8RECMfJG0OR7GO2h但它不像我的情况那么明显.

I also see the similar problem on instagram which uses "swiper" functionality: https://giphy.com/gifs/QU8RECMfJG0OR7GO2h But it's not so visible as in my case.

页脚的css:

.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;
    z-index: 10;
}

我试过position:sticky，但没有用.

我做了一个活生生的例子:https://run.plnkr.co/plunks/wCEUiMEmUD3f2B9u/(https://plnkr.co/edit/wCEUiMEmUD3f2B9u)和angular repo: https://github.com/xfuturomax/swiper-fixed-footer-demo
样式和 html 取自演示代码:https://github.com/nolimits4web/swiper/blob/master/demos/010-default.html

I've made a live example: https://run.plnkr.co/plunks/wCEUiMEmUD3f2B9u/ (https://plnkr.co/edit/wCEUiMEmUD3f2B9u) and angular repo: https://github.com/xfuturomax/swiper-fixed-footer-demo
Styles and html were taken from the demo code: https://github.com/nolimits4web/swiper/blob/master/demos/010-default.html

你有什么想法我可以解决这个问题吗?

Have you got any ideas how I can fix this problem?

更新:

1. 我试过这样:https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
   top: calc(var(--vh, 1vh) * 100 - 44px); +

    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
    window.addEventListener('resize', () => {
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    });

但没有帮助

1. 我注意到，即使没有页脚，我也看到隐藏地址栏有些滞后:https://giphy.com/gifs/iNQGGynwTdrmB8zRPB ，其中绿色 - html 标签的背景.

1. I've noticed that even without the footer I see some lag on hiding address bar: https://giphy.com/gifs/iNQGGynwTdrmB8zRPB , where green - background of html tag.

html {
  background-color: green;
}

1. 解决方案之一 - 主包装器上的内部滚动，效果很好，但地址栏现在不会在滚动时隐藏.这是目前唯一的解决方案.

@media (max-width: 895px) {
      html {
        overflow: hidden;
      }

      body {
        width: 100%;
        height: 100vh;
        position: fixed;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .main-wrapper {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
      }
}

推荐答案

尝试将 -webkit-backface-visibility: hidden; 添加到 .footer

这篇关于在有很多 swipers 的页面上的移动 chrome 中跳转粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！