Vue DOM toggles a rendered BUG

problem description:

to tab1to tab2
(1):
    * pz-index:-1
    section-webkit-overflow-scrolling: touch;
    *{ position: relative;margin: 0;line-height: 1;}
    PCIPHONE712.1.2safari
<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 @click="tab=2">to tab2

</hgroup> <hgroup v-if="tab===1" style="margin-top:20px;"> <p style="z-index: -1" color-black> this is tab1

</hgroup> <hgroup v-if="tab===2"> <p color-black>this is tab2

</hgroup> </section> </div> <script> var app = new Vue({ el: "-sharpapp", data: { tab: 1, } }) </script> </body> </html>
Jun.15,2022

try setting key of hgroup


mac the ios simulator can reproduce. Using safari to see that the element vue is actually rendered, which means it is browser bug. Find a way to workaround


provide a reference

Previous: Highlight.js

  renders the div element directly, how to set it?

Next: The app webview page has two different key domain names with the same name.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be62f8-317c3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be62f8-317c3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?