Html – Fixed position not working on ipad

csshtmlipadsafari

We have developed a small control that is always meant to be at the bottom of the screen on out site. However when I view the site on the ipad the control does not stick to the bottom it floats in the middle.

Whats the deal with fixed position on the ipad? Is it not possible?

Does the ipad use safari mobile?

Best Answer

I think you should read this.

Related Solutions

Javascript – Retrieve the position (X,Y) of an HTML element

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

Html – How to make a div not larger than its contents

The solution is to set your div to display: inline-block.

Best Answer

Related Solutions

Javascript – Retrieve the position (X,Y) of an HTML element

Html – How to make a div not larger than its contents

Related Topic