CODEWITHSUNDEEP
cssipad
Zer0wL
Zer0wL

Reputation: 11

Strange offset in the CSS element position after changing orientation on iPad

I have a web page developed for an iPad for which I used different CSS files for different orientations:

<link REL="stylesheet" href="portrait_style.css" media="all  and (orientation:portrait)"/>
<link REL="stylesheet" href="landscape_style.css" media="all  and (orientation:landscape)"/>

When I start from landscape mode and then move to the portrait, I have to add 125px to all absolutely positioned elements. And when I start from portrait it is started from 0.

When I move from portrait to landscape and back, it again needs the offset.

There is a demo of this available here

I suspect the problem is that there some landscape element that is not changed in portrait mode.

In chrome on my PC this is not happening.

Upvotes: 1

Views: 5194

Answers (3)

peduarte
peduarte

Reputation: 1677

You might need to add this:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

in your <head> section.

More info: Determining iPhone orientation using CSS

Upvotes: 1

Francisco Alvarez
Francisco Alvarez

Reputation: 1621

Try setting the fixed position again with media queries:

/* portrait */
@media screen and (orientation:portrait) {
    .[your-selector]{
        position:fixed;
    }
}
/* landscape */
@media screen and (orientation:landscape) {
    .[your-selector]{
        position:fixed;
    }
}

It looks like when you set the property again it repaints it.

Upvotes: 3

Pete Cook
Pete Cook

Reputation: 21

This is caused by an element that pushes the boundaries of the browser viewport, either with a width over 100% or a left set to a negative value.

A fix I have found is to set the overflow of the body to make the viewport behave:

body {
     position: relative;
     width: 100%;
     overflow: hidden;
}

Setting the position of the body will encapsulate all elements (whether absolute or relative) into the body and clip them at the edge of the body.

Upvotes: 2

Related Questions