收藏
回答

在键盘弹出过收起动画结束后,网页上的元素会有一瞬间被拉伸或挤压变形

我正在开发一个微信浏览器的 SPA,现在遇到问题,在键盘弹出过收起动画结束后,网页上的元素会有一瞬间被拉伸或挤压变形,这种情况偶尔才会出现,我有什么办法可以解决吗?

留意第三张图片,网页在键盘收起的一瞬间出现了整体的拉伸,这种现象在网页上元素较多的时候更容易出现。

回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员--阳光
    社区技术运营专员--阳光
    2023-12-08

    提供下复现demo

    2023-12-08
    有用
    回复 5
  • KaygNas
    KaygNas
    01-03
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
        />
        <title>键盘弹出时会出现伸缩</title>
        <style>
          #many-items {
            background-color: pink;
            width: 100%;
            height: 100vh;
            overflow: auto;
          }
        </style>
      </head>
    
    
      <body>
        <div id="app">
          <label>
            点我弹出键盘
            <input></input>
          </label>
          <div id="many-items"></div>
        </div>
        <script>
          const container = document.querySelector('#many-items');
          const listContainer = document.createElement('ul');
          Array.from({length:20000}).forEach((_, i)=>{
            const listItem = document.createElement('li');
            listItem.textContent = String(i);
            listContainer.appendChild(listItem);
          });
          container.appendChild(listContainer);
        </script>
      </body>
    </html>
    
    



    01-03
    有用 1
    回复
  • huojinfi
    huojinfi
    01-24

    我也遇到了相同问题,安卓h5页面,同样出现软键盘收起的元素拉伸情况

    01-24
    有用
    回复
登录 后发表内容