I wanted my background image to stay in the same place. Therefore i used
background-attachment:fixed;
When I found that iOS clearly does not support this property, I decided to put a fixed background div in the DOM. This really works very well:
#background {
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-position:50% 0%;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url("images/mark-bg.png");
}
At first glance, this works fine on iOS as well. But then I found out that Safari scrolls the DIV to the point where it will scroll if it is not fixed.
Now I ask myself "What the hell ...?!" I mean ... Why is iOS scrolling an element that is explicitly told not to do this?
Is there any reasonable solution?
Here is the full demo
EDIT
I just found out that it is not the element that moves itself, but the background image moves ...