Philippe, > Oh but Mobile Safari downsized your page all right, to its viewport width > of 980px; but then that downsized page overflows, and cause the gap you > noticed. Mobile Safari is kind enough to show everything what's on your > page, without clipping. Luckily, as otherwise some contents maybe > inaccessible, due to your use of overflow:hidden. >
I needed the overflow:hidden to make the bg image shows up. In my early test, I did consider this maybe the cause but my tests showed that it wasn't the case. It's absolutely possible I overlooked and still not seeing the obvious with the newest test which has the overflow:hidden. I even changed the 1014px to 63.375em hoping Mobile Safari is kinder to em unit. http://jsbin.com/iyedi3/ (no viewport nor media queries) The layout uses quite a number of absolute positioning with relative positions for the their wrapper divs, maybe this causes the issue? > > > also for landscape view, the viewport is 1024, and since the container > that holds the bg image is 1024 it shouldn't cut off the image, but it does. > This is the reason I thought it's a bug. > > Wrong, the viewport is still 980px (unless otherwise specified); don't > confuse it with device width / height. > Alright. Good reminder! However from what is presented in the iPad Safari, I am still not convinced this is the overflow issue for two reasons: 1) The 1500px background is outside the #container which has 1014px width and previously with overflow:hidden. It belongs to #container-wrap which has a 100% width. 2) In my previous test (http://jsbin.com/aholi4/) which contained the overflow:hidden, in which the upper top green bar is a repeated background image with 100% width declared, and belongs to #sitewrap, which you commented unnecessary, so in the newest test I removed the 100%. Both the #container-wrap and #sitewrap are the the outer divs for #container, so they should not be cut off in my understand of how CSS works. Thanks! tee > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com/ > > > > > > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
