如何解决视口单元应该在阴影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 单位来实现动态调整大小。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。