我有一个多栏页面。左侧面板(示例中的红色条)具有固定位置和静态大小。当内容很多时,它也应该是可滚动的。
在此列中,某些内容可能存在弹出窗口(在示例中为蓝色)。 Popover也有一个固定的位置,它应该在整个页面上可见,而不仅仅在红色栏内。
因此,当我进行属性转换时,Chrome弹出窗口仅在红色栏中可见:translateZ(0)应用于弹出窗口本身或此弹出窗口中的任何子节点。我的例子是简化的,在实际情况中 - 我有一个滚动插件,它将该属性应用于某个子节点。
我已经在Firefox中检查过 - 一切都很好。
在Chrome中是否还有解决此问题的解决方法?
.left {
width: 300px;
height: 100%;
overflow-x: visible;
overflow-y: auto;
background: red;
position: fixed;
}
.popover {
top: 100px;
left: 200px;
width: 320px;
height: 200px;
position: fixed;
transform: translateZ(0);
background: blue;
}
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel ornare nunc. Proin ultrices enim erat, hendrerit tempus erat congue nec. Curabitur malesuada massa dolor. Aenean sit amet erat quis tortor egestas fringilla. Phasellus venenatis augue
et mi accumsan, sit amet mollis nisi ullamcorper. Etiam eget dignissim augue, nec elementum elit. Proin elementum neque at consequat convallis. Praesent eu fringilla diam. Suspendisse efficitur ornare sapien. Praesent hendrerit arcu purus, eget imperdiet
tortor luctus sit amet. Donec tempor orci neque, eget commodo erat dictum iaculis. Nullam commodo egestas mauris. In auctor quam vitae ligula accumsan, sit amet tempus ligula sollicitudin. Maecenas eget enim ac sapien cursus pretium ac in mauris. Praesent
faucibus ullamcorper elit nec convallis. Phasellus metus nulla, gravida id sapien convallis, porta sagittis nisl. Morbi lacinia augue sit amet mi viverra, sit amet blandit purus sagittis. Donec placerat lacus purus, id luctus nisl dapibus sed. Vivamus
feugiat sit amet neque quis condimentum. In vel odio orci. Phasellus ultricies ex ligula, et tempus lorem finibus at. Vivamus nec tempor ante. Sed et rhoncus diam. Fusce consectetur, augue vel interdum viverra, odio felis cursus orci, at bibendum enim
urna suscipit nisi. Nunc sit amet ex nisi. Maecenas sit amet enim eget ipsum sagittis tempor. Curabitur rutrum turpis eget sapien convallis, et pharetra ligula tempor. Vivamus purus mi, tincidunt a dapibus id, vestibulum quis est. Ut lacinia ex rutrum,
euismod ante eget, gravida ex. Maecenas fermentum ligula sit amet nisl viverra ullamcorper. Proin tincidunt fermentum dui ac gravida. Phasellus molestie, purus vitae elementum lacinia, lacus velit dapibus augue, in viverra arcu lacus nec massa. Praesent
nec quam in nisl posuere tempus sed at tortor. Proin efficitur vehicula lacus, at aliquet massa varius quis. Mauris sed purus eget elit molestie laoreet tempor nec orci. Suspendisse ipsum dolor, tristique nec magna euismod, blandit ullamcorper mauris.
Aliquam in tincidunt mauris. Vestibulum ante lorem, consequat sit amet purus id, tincidunt fermentum eros. Donec ultricies leo quis sapien aliquet, ut imperdiet enim cursus. Fusce commodo ac arcu quis facilisis. Proin dignissim pulvinar pretium. Mauris
vel libero turpis. Integer eu viverra nisl, vel rhoncus augue. Suspendisse et iaculis nisi. Sed nec ipsum neque. Nam quis metus eget velit suscipit suscipit. Quisque est metus, maximus ut dui eget, auctor convallis nibh. Praesent congue ipsum eget tellus
tincidunt, eget tempor urna vulputate. Quisque erat nulla, tincidunt ac scelerisque eu, posuere eget risus. Ut feugiat id nisi sit amet pharetra. Nam at elit eget lacus scelerisque efficitur. Sed vel lacus sed dui condimentum pulvinar in a tortor. Duis
in ex eu orci condimentum varius in rutrum tellus. Quisque neque ipsum, fringilla venenatis nisl in, iaculis venenatis nisl. Nullam augue tortor, venenatis vel magna id, rutrum egestas ante. Vestibulum nec tincidunt sapien.
<div class="popover"></div>
</div>