Question

在移动Chrome中，我看到一种奇怪的行为，在使用potision:fixed和position:sticky时，元素的位置及其渲染位置均不同步。

下图有助于阐明问题： (Left) Desynced render and element position, (right) Synced render and element position

我有以下最小的测试案例可以重现问题，尽管导致问题的确切条件尚不清楚。它似乎是断断续续的，但是打开和关闭键盘以及疯狂的上/下滚动都似乎触发了不同步。

   .registration-footer {
    	position:sticky;
    	bottom:-1px;
        height:4rem;
    	background-color:white;
    	border-top: 1px solid #BFCDDC;
    	box-shadow: 0px -2px 10px rgba(0, 0, 0, .4);
    	border-top-right-radius: 5px;
    	border-top-left-radius: 5px;
    	z-index: 10;
    }

<html>
  <head>
    <meta http-equiv="x-ua-compatible" content="IE=edge" >
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
  </head>
  <body>
    <input type="text">
    <div>AAH</div>
    <!-- repeat ad nauseam, enough to have to scroll -->
    <div>AAH</div>
    <div class="registration-footer">
        Believe it!
    </div>
  </body>
</html>

一旦我造成浏览器崩溃并开始不同步，在视口顶部显示/隐藏导航栏将任一导致元素的位置向下移动，从而使其完全不可能与之互动或将其向上移动，从而使实际可点击区域高于该元素本身显示的位置。

与这种性质的类似问题不同，一旦取消同步开始，用户将无法对其进行修复。捏放大或我们只是放大或缩小，元素将保持完全不同步。仅刷新页面即可解决问题。

我在这里完全不知所措，而且我开始认为这是Chrome本身的错误，而CSS无法解决。

元素位置和渲染位置在移动Chrome上不同步

0 个答案: