IOS moves background image at fixed positioning

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 ...

+4
2

, , , . background-image CSS, img div :

#background img {
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
}

, " " . Lucky, ...

, : [

Edit

CSS, :

#background img {
    margin-left:auto;
    margin-right:auto;
}
+1

.

, , , div, Safari " : ".

, , .

: 50% 50% : , , .

, <img> <div>, .

div, EXCEPT FOR background-attachment, .

div, , div, div , 50%/50% .

!

div :

#div_background > div
{
    top: 0px;
    left: 0px;
    width: auto;
    height: auto;
    right: 0px;
    bottom: 0px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;

    background-image: url(/images/background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

div :

#div_background
{
    display: inline-block;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    right: 0%;
    bottom: 0%;
    z-index: -1;
    background-color: #A0B4C8;
}

HTML :

<div id="div_background"><div></div></div>

, - Safari.

, div .

, !

0

Source: https://habr.com/ru/post/1538085/


All Articles