Position:Fixed in Windows Phone 7

position:fixed in Windows Phone 7

I was also hanging on this problem. It really seems not to be possible to create a fixed element and to position elements after every scroll looks even worse (try the jquery mobile online examples on your phone they do it this way).

I "solved" the problem by using a div container for my non fixed content with style="overflow: scroll" and fixed size. This worked for me. But scrolling in this container doesn't look like native scrolling.

Hope that helps

Issue with position:fixed on Windows Phone

You missed the semicoloms after width:100% and height 50px
Also there is no position:fixed ? You should post the whole code :)

<style>
.bottom-menu {
width:100%;
height:50px;
background-color:#e3e3e3;
position: fixed;
bottom: 0
}
</style>
<div class="bottom-menu">
some text and social icon
</div>

Also make sure you have <!DOCTYPE html> at the beginning of your documents because this also can cause troubles in some browsers.
Also the ; at the End of an CSS Document in unnecessary :)

Position fixed not working on Windows Safari

The solution was to define the z-index on that position:fixed; element. For some reason only on Windows Safari position:fixed; didn't work until any z-index was defined.

Later, I discover that this bug is probably caused by -webkit-transform property that some of the fixed elements on page have.

Also, I found that setting this on that fixed element could help:

-webkit-transform: translateZ(0);

Scaling a 768px wide website for windows phone

SOLVED.

The problem is with Position Fixed DIVs with a specified width in pixels.

If the viewport is being controlled by media queries (specifically for WinPhone 7/8) then specifying a width greater then the screen width in a fixed div causes the problem.

Here is the start of my altered CSS - note the div.header and div.site entries. NO SPECIFIED WIDTH - just 100% inherited from body with a max-width thrown in.

body
{width:100%;
max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}

@font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}

@font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}

div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal; 
text-align:justify;
color:#202020;}

div.site
{max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;}

div.header
{position:fixed;
z-index:5;}

And Here are the media and viewport elements I used.

@media screen and (max-device-width: 25em)
{body
    {-webkit-text-size-adjust: none; 
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    -text-size-adjust: none;}}

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

And here is the head viewport meta tag in the html

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

Hope this helps.

windows phone 8 HTML5 viewport is higher than the screen after update to 8.0.10328.78

I have been having this issue in a Cordova/PhoneGap app as well. I even see the issue in Windows Phone 8 HTML5 apps when I am not using PhoneGap (just create a new project in Visual Studio 2012 from "Templates -> Visual C# -> Windows Phone HTML5 App"). This issue does not appear if you are loading the same HTML5 code from a hosted site using the IE app on Windows Phone 8.

The only thing that I have found to get the viewport to work correctly is to hide the system tray.

In MainPage.xaml change

shell:SystemTray.IsVisible="True"

shell:SystemTray.IsVisible="False"

This hides the system tray and makes your app a fullscreen app.

For some reason when the app is full screen the viewport behaves as expected.

Footer is not fixing

Windows Phone 7 – both pre and post-Mango ignore fixed positioning and render fixed elements as position: static. IE9 desktop and other browsers you tested on supports position: fixed.
http://bradfrostweb.com/blog/mobile/fixed-position/

Expressions seems no more supported
http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx

So I would recommend to remove 'position: fixed' and make it working in IE9 desktop first since there is no easy way to debug html in WP7. It also seems you will have to proceed with additional js to get fixed footer in WP7.

Position:Fixed in Windows Phone 7