Currently facing an issue with a website I am creating for my wedding invitation. The top section is set to have a 100% height and requires scrolling to view the rest of the content.
While it functions perfectly on FireFox / Chrome on my computer, there seems to be a problem when accessing the website on an iPhone or iPad with iOS. The scrolling feature does not work on these devices.
I suspect that this issue is due to the 100% body height. Does anyone have any suggestions on how to resolve this problem for iOS?
Find a snippet of the code below: http://jsfiddle.net/ysLfL/
<html>
<body>
<header>
</header>
<section>
</section>
<section>
<section>
...
Here is the CSS code:
html, body, header{
height:100%;
}
section{
height: 1000px;
}
Although the header displays correctly, I am unable to scroll to the next section.