style not update #359

yifei8 · 2023-05-24T12:39:47Z

Affected version

0.12.0 +

No same issues found.

Yes, I search all issues but not found.

Steps to Reproduce

参考以下示例

Code example

<html style="font-size: 9.25926vw">
  <head>
    <meta charset="utf-8" />
    <meta content="portrait" name="screen-orientation" />
    <meta content="portrait" name="x5-orientation" />
    <meta content="webkit" name="renderer" />
    <meta content="max-age=180" http-equiv="Cache-control" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"
    />
    <title>dom更新时，样式无法更新问题</title>
    <meta name="keywords" content="请配置页面关键词" />
    <meta name="description" content="请配置页面描述" />
  </head>
  <style>
    body {
      width: 100%;
      height: 100vh;
      margin: 0;
    }
    .pic-list {
      align-items: center;
      border-bottom: solid 1px #f2f2f2;
      display: flex;
      flex-shrink: 0;
      overflow-x: auto;
      padding: 24px 54px;
      white-space: nowrap;
      width: 100%;
    }
    .image-item {
      flex-shrink: 0;
      height: 80px;
      background: black;
      margin-right: 20px;
      position: relative;
      width: 80px;
    }
    .image-item:last-child {
      margin-right: 0px;
    }

    .btn {
      width: 100px;
      height: auto;
      border-radius: 10px;
      padding: 10px;
      border: 1px solid coral;
    }
  </style>

  <body>
    <div class="pic-list">
      <div class="image-item"></div>
      <div class="image-item"></div>
    </div>

    <button class="new-btn">新增一个</button>
    <button class="delete-btn">减少一个</button>

    <script>
      const picList = document.querySelector('.pic-list');
      const newBtn = document.querySelector('.new-btn');
      const deleteBtn = document.querySelector('.delete-btn');

      newBtn.addEventListener('click', () => {
        const imageItem = document.createElement('div');
        imageItem.classList.add('image-item');
        picList.appendChild(imageItem);
      });

      deleteBtn.addEventListener('click', () => {
        const imageItem = document.querySelector('.image-item:last-child');
        picList.removeChild(imageItem);
      });
    </script>
  </body>
</html>

Expected results

和H5表现一样

Actual results

表现异常

yifei8 added the bug Something isn't working label May 24, 2023

devjiangzhou self-assigned this Jul 5, 2023

devjiangzhou mentioned this issue Jul 4, 2023

[WIP] fix: checking for style updates of sibling nodes. #403

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

style not update #359

style not update #359

yifei8 commented May 24, 2023 •

edited

style not update #359

style not update #359

Comments

yifei8 commented May 24, 2023 • edited

Affected version

No same issues found.

Steps to Reproduce

Code example

Expected results

Actual results

yifei8 commented May 24, 2023 •

edited