PDA

View Full Version : How does Sencha solve the iPad/iPhone "position: fixed" problem?



jokelas
7 Feb 2011, 10:22 AM
Hi,

Apple iPad and iPhone both suffer from applying the CSS property position to fixed properly. I have heard that Sencha solves this problem for developers. How does it do this exactly?

mitchellsimoens
8 Feb 2011, 8:52 AM
They use the body tag as it doesn't need position, set the margin to zero and it will be aligned to the top-left of the screen. Setting the width and height makes it then take 100% of the screen.

jokelas
8 Feb 2011, 10:22 AM
Could you elaborate a bit more? Do they set the body tag size to 100%, margins to 0 and then what?

mitchellsimoens
8 Feb 2011, 10:36 AM
Take a look. Create a quick file and then inspect it using the dev tools in Chrome and Safari.

My sample JS I used is this:


Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
html: "Hi"
});
}
});

I then switched to the Elements tab to view the DOM. I clicked on the body tag and it shows all the CSS to the right. It sets the margin to zero and width and height to 100%. I guess it then gets the height of the screen in pixels and set's the body tag to that number.

http://img109.imageshack.us/img109/5865/fullscreen.jpg

davidkaneda
8 Feb 2011, 2:34 PM
Just to clarify — We have divs with position absolute on the screen and then "simulate" the scroll (ie. the motion/physics, etc.) to replicate the native one, purely using the touch events. Hope that helps!

foxstatic
3 Feb 2012, 12:42 AM
so what's the best way to apply sencha to an existing mobile website (a responsive wordpress install), just so that you can get the BODY position:fixed to work?

i've added the js and css to the header, but now i can't scroll the page at all. i can see the webpage, but can't touch it.

- fox