html - Flex、图片和滚动位置

Question

在下面的代码片段中，交替显示了两张图片。这些图片位于一个设置了 flex 的容器中，每个容器都包裹在一个 picture 标签中。

最初一切正常，但是当您缓慢向下滚动时，您会注意到一旦滚动过图像边缘，下面的文本就会开始跳动。

如果我删除 picture 标签，就不会发生这种情况。

这是怎么回事？

window.setInterval(function () {
  document.querySelector('.a').style.display = 'none';
  document.querySelector('.b').style.display = 'inline-block';
  window.setTimeout(function () {
    document.querySelector('.a').style.display = 'inline-block';
    document.querySelector('.b').style.display = 'none';
  }, 500);
}, 1000);

<p style="height: 100px;"></p>
<div style="display: flex; align-items: center; height: 200px;">
  <picture>
    <img class="a" src="https://placekitten.com/g/300/200">
  </picture>
  <picture>
    <img class="b" src="https://placekitten.com/300/200">
  </picture>
</div>
Meow
<p style="height: 3000px;"></p>
  

Answer 1

不是切换会影响布局高度的显示，而是将宽度设置为 0

window.setInterval(function () {
  document.querySelector('.a').style.width = 0;
  document.querySelector('.b').style.width = 'auto';
  window.setTimeout(function () {
    document.querySelector('.a').style.width = 'auto';
    document.querySelector('.b').style.width = 0;
  }, 500);
}, 1000);

<p style="height: 100px;"></p>
<div style="display: flex; align-items: center;">
  <picture>
    <img class="a" src="https://placekitten.com/g/200/300">
  </picture>
  <picture>
    <img class="b" src="https://placekitten.com/200/300">
  </picture>
</div>
Meow
<p style="height: 3000px;"></p>