Category: Polymer/Webcomponents

Actually, I thought I understood position:fixed in HTML/CSS, but then I had some trouble in combination with transform:translate3d.  Generally position:fixed of an element means, you will have this element relative to the viewport (the browser window) fixed positioned, regardless any scroll-position.

For example the following HTML-Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div style="position:absolute; left: 20px; top: 20px; width: 150px;  background-color: #7FDBFF">
<h1>positioned Box</h1>
<p>
Lorem ipsum ...
</p>
<div style="position:fixed; background-color:#FF851B; left: 50px; top:50px;width:100px;height: 30px;">
Fixed Box
</div>
</div>
<div style="position:absolute; left: 250px; top: 20px; width: 150px;  background-color: #2ECC40">
<h1>translated Box</h1>
<p>
Lorem ipsum...</p>
<div style="position:fixed; background-color:#FF4136; left: 50px; top:90px;width:100px;height: 30px;">
Fixed Box
</div>
</div>

You will see two absolute positioned boxes (an aqua and a green one) and two fixed boxes (orange and red), which are children of the absolute positioned boxes.

The CSS-transform API gives now the possibility to use translate3d as a fast left/top replacement. So we can rewrite the green box to:

1
2
3
4
5
6
7
8

<div style="position:absolute; transform: translate3d(250px, 20px, 0px); width: 150px;  background-color: #2ECC40">
<h1>translated Box</h1>
<p>
Lorem ipsum...</p>
<div style="position:fixed; background-color:#FF4136; left: 50px; top:90px;width:100px;height: 30px;">
Fixed Box
</div>
</div>

We would expect the same result, but got a different one:

You see that the red box is jumped to the right. The reason for this result is due to the fact, that translate3d moves the virtual viewport and so the root of the fixed position-relation. Unfortunately the common function getClientBoundingRect, which gives you the rectangle in the viewport, did not respect the translate3d transformation, so that common elements like Polymers iron-dropdown did not work properly anymore.

Until now I have no common solution for that problem, comments are welcome!

You can see, and play around, with my example on JSFiddle.

And also the polymer example shows the problem.