Categories
HTML/CSS Javascript Polymer/Webcomponents

position:fixed and translate3d

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.

boxes1

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:

boxes2

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.

Categories
Java JBoss

Using multiple PersistenceUnits with same name

To be really flexible in my CMS I decided to use a persistence unit with one name which will be configured in the final webapplication. This means I have a persistence unit “cms” in my business-components in my cms.jar and this unit is configured via persistence.xml in the including web-application, which uses my “cms.jar”. So every webapplication has its own database and I can reuse my businesslogic for the cms (retrieve content, or images and so on).
The problem now is that I have some problems with deploying two applications on JBoss 5.1.0.GA which includes my cms, because there is a bug in this application-server. I hope this will be fixed in the one of the next versions.