我在使用镀铬的聚合物应用程序向下滚动时发现旋转元素及其内容消失的原因时遇到了一些问题。
当已修复的旋转元素放在app-header-layout
元素中并且存在paper-input
元素时,会发生此问题。
问题仍然存在于阴影DOM渲染中。
这是我设法制作的最小的可重复片段。 https://jsbin.com/celarureyo/1/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="https://polygit.org/components/">
<script>
window.Polymer = {
dom: 'shady'
};
</script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="paper-input/paper-input.html">
<style>
html,
body {
padding: 0px;
margin: 0px;
height: 100vh;
width: 100vw;
font-family: Noto, Roboto;
color: white;
background-color: #eee;
}
paper-input {
padding: 24px;
}
#content {
height: 200vh;
}
#rotated-fixed-box {
position: fixed;
background-color: tomato;
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
bottom: 32px;
left: 32px;
transform: rotate(45deg);
}
#regular-fixed-box {
position: fixed;
background-color: #0097B2;
display: flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
bottom: 32px;
left: 128px;
}
#rotated-inner-box {
background-color: tomato;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(45deg);
}
</style>
<body>
<app-header-layout id="header-layout" has-scrolling-region>
<div id="content">
<paper-input label="This is weird"></paper-input>
<div id="rotated-fixed-box">text</div>
<div id="regular-fixed-box">
<div id="rotated-inner-box">text</div>
</div>
</div>
</app-header-layout>
</body>
</html>
答案 0 :(得分:0)