Develop Reference

webkit-overflow-scrolling: touch with fixed divs

I've this small issue, I've created an HTML5 website with ASP.NET where the header is fixed, but on iPad and iPhone it scroll really slow so I had to use this small code in my CSS:
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
The scroll issue is gone but the fixed header doesn't work anymore on apple products. But on Windows and Android it works like a charm.
Also I had an autoplay video that plays when its visible and now it doesn't work anymore on any device.
My code:
<style>
body, html, form {
width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
-webkit-transform: translateZ(0);
}
#wr {
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
#header .fixed-menu {
position: fixed;
width: 100%;
z-index: 100;
}
#header .menu {
float: right;
font-family: 'Oswald', sans-serif;
font-size: 14px;
}
</style>
Please help (and sorry for my bad English)

-webkit-overflow-scrolling: touch on android

i just finished developing my iOS Application with Cordova. So now i want to do the same on Android. Everything works fine but: You cant Overscroll the content. I have a fixed header/footer, then a Picture and then some navigation points.
On iOS you can Scroll the Content so that you can see the clients logo in the background. On Android this doesn't work, you can not overscroll the content to see the logo.
I read that -webkit-overflow-scrolling: touch and overflow: scroll doesn't work on Android. But those questions were from 2011. Is it still not possible to make the content overscrollable on Android?
Thank you!!
.ScrollableWrapper {
overflow: scroll;
-webkit-overflow-scrolling: touch; /*to make it smooth as native*/
background:url(../img/start/bg_wrapper.jpg)no-repeat scroll 0 0 / 320px 480px rgba(0, 0, 0, 0);
top: 45px;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
position: fixed;
}
#header {
padding-top: 0px;
margin: 0px;
position: fixed;
top: 0px;
left: 0px;
width: 320px;
z-index: 2;
max-height: 45px !important;
height: 45px !important;
}
#foooter {
position: fixed;
bottom: 0px;
z-index: 2000;
width: 100%;
height: 58px;
}

Maybe you can have a look at iScroll.

Display div at center horizontally and vertically at mobile device using CSS only

The task is to display block at center horizontally and vertically inside other block. I use this code
<div class="parent">
<div class="child"></div>
</div>
.parent {
background-color: #AFAFAF;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.child {
background-color: #FF0000;
bottom: 0;
height: 200px;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
width: 200px;
}
and it works great on browsers and iOS devices, but this is the case in mobile android devices (not tablet): the inner div gets pinned to the top left corner, but when I inspect element using Adobe Edge Inspect I see that highlighted area for this inner div is displayed correctly. How can I fix this issue with centering on Android mobile? The size of inner block will change so the desigion should be universal.

I used to align div horizontally and verticaly the way you're doing but it seems like this technique is not really cross browser. Instead I took a look at the way Facebook was doing.
The demo on JsFiddle
The HTML :
<table>
<tr>
<td><div class="square">Some text</div></td>
</tr>
</table>
The CSS :
html, body {
height: 100%;
width: 100%;
}
table {
margin: 0px auto;
height: 100%;
}
.square {
width: 150px;
height: 150px;
background-color: red;
}
NOTE : I recently took a look and it seems like Facebook changed the way they do it. They are still using table display properties but no more the table, tr and td tag (div instead).

The easiest way with your markup is {left:50%;margin-left:-100px;}.
Then the same with height. {top:50%;margin-top:-100px;}
In summary:
.child {
background-color: #FF0000;
height: 200px;
left: 50%;
position: fixed;
top: 50%;
width: 200px;
margin: -100px 0 0 -100px;
}

Paragraph (Section) width changing size in Android Browser

I have created a website for a client that works on all web browsers as I intended except for Android. For reasons unknown the Android browser resizes my Menu bar as well as the part depending which phone it is running on.
If you would like to see the code please go to this link
This is a screen shot from the Galaxy Nexus
screen shot from Galaxy Nexus
As you can see the text has been pushed into a tall thin column. I have no idea why it is doing this.
Any help would be much appreciated.

Delete everything in the #AboutUs From the #AboutUs in Style.Css line 445.
Before
#AboutUs
{
height: 655px;
}
After
#AboutUs
{
}
As for the footer, remove the width from its css (#legal) (Line 693 in Style.CSS)
Before
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
width: 130px;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
After
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}

jQuery mobile 1.3 panel on android

I'm using the new panel widget from jQuery mobile. But i think it has a bug. I can't scroll inside the panel if its content is bigger then the actual "content".
To see what I mean, please check out this on an Android device and try to scroll inside the panel.

you can add two attributes in css to fix the scroll
height: 100%;
overflow-y: scroll;
<div data-role="panel" id="mypanel" style=" height: 100%; overflow-y: scroll;">
I hope this work in Android, Please try.

Problem is fixed with jquery-mobile 1.3 RC1.

Try to clear ui-panel-inner and add overflow: scroll to ui-panel
.ui-panel {
width: 17em;
min-height: 100%;
border-width: 0;
position: absolute !important;
overflow: scroll !important;
top: 0;
display: block;
padding: 0 !important;
margin: 0 !important;
}
.ui-panel-inner:after {
content: '.';
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
display: block;
}