视口单元应该在阴影DOM中响应吗？

问题描述

在Safari中，我认为应用于阴影DOM中元素的视口单位（例如vw）实际上并不响应视口的更改。应该吗？

在下面的演示中，浅蓝色<main>元素和危险条纹<div>的宽度均设置为50vw。在Chrome，Firefox，Edge和Opera中，这些元素的大小与我放大和缩小视口的大小相同，而在Safari中，<div>保持大小不变​​。

const shadow = document.querySelector('.shadow-root').attachShadow({ mode: 'open' });

const style = document.createElement('style');
style.innerText = `
div {
  width: 50vw;
  height: 100px;
  background-image: repeating-linear-gradient(-45deg,#333 0,#333 10px,#fc0 10px,#fc0 20px);
}`;

shadow.appendChild(style);
shadow.appendChild(document.createElement('div'));

body {
  margin: 0;
}

main {
  margin: 0 auto;
  width: 50vw;
  height: 100vh;
  background-color: lightblue;
}

<main class="shadow-root"></main>

解决方法

是的，他们应该。

这是 Safari 的一个主要失败。

解决方法：可以通过在 shadow font-size 中使用 rem 单位并将 font-size 设置为 html 上的 vh/vw 单位来实现动态调整大小。