Vue DOM切换渲染的一个BUG

问题描述:

今天发现一个很神奇的渲染问题,当点击to tab1和to tab2切换的时候,发现界面没有被渲染出来,代码如下,大家知道为什么吗?
其中必要条件是(缺1不可):
    * p标签上的z-index:-1
    最外层section的-webkit-overflow-scrolling: touch;
    *{ position: relative;margin: 0;line-height: 1;}
    要在手机上运行,PC上是没问题的,本人是IPHONE7,系统12.1.2,微信和safari必现
<html>
<head>
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
  * {
    font-size:40px;
    position: relative;
    margin: 0;
    line-height: 1;
  }

  </style>
</head>

<body>
  <div id="app">
    <section style="overflow: scroll;-webkit-overflow-scrolling: touch;">
      <hgroup>
        <p @click="tab=1">to tab1</p>
        <p @click="tab=2">to tab2</p>
      </hgroup>

      <hgroup v-if="tab===1" style="margin-top:20px;">
        <p style="z-index: -1" color-black>
          this is tab1
        </p>
      </hgroup>
      <hgroup v-if="tab===2">
        <p color-black>this is tab2</p>
      </hgroup>
    </section>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      tab: 1,
    }
  })
  </script>
</body>

</html>

回答:

试一下设置hgroup的key

回答:

mac下的ios模拟器可复现,用safari看元素其实vue是渲染出来的,说明是浏览器bug,想办法workaround吧

回答:

提供一个参考
深入研究-webkit-overflow-scrolling:touch及ios滚动

可以试试去掉这个style 看看是不是这个引起的

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注