I'm animating an element by unveiling it from the bottom of the page. The position of the child elements should not be affected by the size change of the unveiling animation.

That's what I'm looking for:

![goal](https://i.stack.imgur.com/mhynt.gif)

```
<div>
    <h1>Hello stranger</h1>
</div>

```

Both elements are positioned `absolute` with top, right, bottom & left set to `0`. The contents are revealed by lowering the `top` of the `div` from `100%` to `0%`. *Have a [Fiddle](http://jsfiddle.net/RienNeVaPlus/o8d79jum/10/).*

My goal is 

1. to keep the heading always at a fixed position (middle)
2. hide the heading when it is not uncovered yet

But these are my problems *(Fiddles included)*

* When using `position:fixed` for the `h1` the `overflow` [becomes always visible](http://jsfiddle.net/RienNeVaPlus/o8d79jum/10/).
* When using `position:absolute` the position [isn't `fixed` correctly](http://jsfiddle.net/o8d79jum/3/).
* When using `clip:rect(500px auto auto auto)` I lose the ability to use `%`. And thus I can't determine the exact height of the viewport without using JavaScript.

**What else can be done to archieve the described behavour without JS?**