Login/Register
Prevent absolute positioned element from dragging (iOS Safari)
Asked Answered
htmlioscsscss-positionmobile-safari
P

1

6

Assume a simple structure like this:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    </head>
    <body>    
        <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">Text</div>
    </body>
</html>

In most mobile browsers, this displays an absolute positioned text without any means of moving the element. But in Safari / iOS 9, you can drag the element vertically, similar to an overflow scrolling.

I am aware that position: fixed; does not have this issue, but in my use case I definitely have to use position: absolute;.

Is there any way to prevent absolute positioned elements from behaving like this in Safari?

Phone answered 30/9, 2016 at 10:55 Comment(0)
L
0

try to put the absolute positioned element into an container which has position: relative; Maybe it'll work

Leitman answered 30/9, 2016 at 11:37 Comment(3)
Thanks for your input. Unfortunately, a container with position: relative; does not have any effect. – Phone
try giving the absolute element a width of 100%, that should fix it. Also only use two values like top and left, no all four of them with a value of 0. Because then the element isn't fixed anywhere in the document – Leitman
I'm afraid that does not have any effect either. For clarification, my actual element is an overlay container that stretches across its whole parent, so stretching it via left: 0; right: 0; top: 0; bottom: 0; does have the same outcome as width: 100%; height: 100%;. – Phone

© 2022 - 2024 — McMap. All rights reserved.