Script issues on iPhone (Apple Devices in general i think)

and firstly thanks for the help in advance.

I'm designing the website for my business, and only have enough skill to really make CSS and HTML changes. Recently with the help of a freelancer, i managed to get the OnePage Scroll by 'thePete design' script implemented into my website.

More information on that here : http://ift.tt/1b68b68

My website URL is http://ift.tt/1VUJDlo

The problem i am facing is that although everything works fine on desktop, and android phones, there is an issue where iOS devices are having issues, the page falls out of place, the OnePage Scroll function stops working and there are gaps beeing created at the end of the script. In conclusion, the page acts horribly on iOS devices. I have tested this on the iPhone 6 Plus, the iPhone 6, the iPhone 5S, the iPad Air 2 and the iPad Mini 2!

I think it has something to do with iOS devices viewport and 100% height, though i could be TOTALLY wrong. Ive been stuck with this issue for a while and then i remembered you good folk here :)

Im not sure how this website works or what more you need from me. I will paste my CSS, hope that will help. If you need anything else please let me know.

CSS for the actual script :

body, html {
  margin: 0;
  overflow: hidden;
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  transition: opacity 400ms;
}

.header-topblock{
display:none;}

body, .onepage-wrapper, html {
  display: block;
  position: static;
  padding: 0;
  width: 100%;
  height: 100%;
}

.main{
height:100% !important;
position:absolute !important;
}

.onepage-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  padding: 0;
  -webkit-transform-style: preserve-3d;
}

.onepage-wrapper .section {
  width: 100%;
  height: 100%;
}

.onepage-pagination {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
}
.onepage-pagination li {
  padding: 0;
  text-align: center;
}
.onepage-pagination li a{
  padding: 10px;
  width: 4px;
  height: 4px;
  display: block;
  
}
.onepage-pagination li a:before{
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.onepage-pagination li a.active:before{
  width: 10px;
  height: 10px;
  background: none;
  border: 1px solid black;
  margin-top: -4px;
  left: 8px;
}

.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
  overflow: auto;
}

.disabled-onepage-scroll .onepage-wrapper .section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}
.disabled-onepage-scroll .onepage-wrapper {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
  -ms-transform: none !important;
  min-height: 100%;
}


.disabled-onepage-scroll .onepage-pagination {
  display: none;
}

body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
  position: inherit;
}

CSS for my page styles

.center-block {
            margin: 0 auto;
        }
        h1, h2 {
            width: 100%;
            float: left;
        }
        h1 {
            margin-top: 100px;
            color: #000;
            margin-bottom: 5px;
            font-size: 70px;
            letter-spacing: -4px;
            font-weight: 100;
        }
        h1 span {
            font-size: 26px;
            margin: 0 5px;
            text-transform: capitalize;
            background: rgba(0,0,0,0.85);
            display: inline-block;
            color: #6D461D;
            border-radius: 5px 5px;
            -webkit-border-radius: 5px 5px;
            -moz-border-radius: 5px 5px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
            padding: 3px 10px;
        }
        h2 {
            color: #6D461D;
            font-weight: 100;
            margin-top: 0;
            margin-bottom: 10px;
        }
        .main {
            float: left;
            margin: 0 0 0 220px !important;
            height: 100% !important;
  position:absolute !important;
        }
        .main h1 {
            padding:150px 50px;
            float: left;
            width: 100%;
            font-size: 45px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            font-weight: 100;
            color: white;
            margin: 0;
        }
        .main section .page_container {
            position: relative;
            top: 16%;
            margin: 0 auto 0;
            max-width: 85%;
            z-index: 3;
        }
        .main section  {
            overflow: hidden;
        }
        .main section > img {
            position: absolute;
            max-width: 100%;
            z-index: 1;
        }
        .main section.page1 {
            background:rgb(230, 217, 200);
        }
        .main section.page1 h1 {
            float: none;
            width: 100%;
            display: block;
            text-align: center;
            padding: 0;
            margin-bottom: 15px;
            font-size: 44px;
            color: black;
        }
        .main section.page1 h2 {
               font-size: 18px;
               display: block;
               color: rgba(0,0,0,0.85);
               text-align: center;
               width: 100%;
               line-height: 160%;
        }
        .main section.page2 {
            background: #555557 url('http://ift.tt/1SSS5gt') no-repeat center -150px ;
        }
        .main section.page2 > img {
            position: absolute;
            top: -300px;
            left: 50%;
            margin-left: -1095px;
        }
        .main section.page2 .page_container {
            overflow: hidden;
        }
        .main section.page2 h1 {
            text-align: center;
            padding: 0;
            margin-bottom: 15px;
            font-size: 50px;
            letter-spacing: -1px;
            color: white;
        }
        .main section.page2 h2 {
            color: rgba(255,255,255,0.85);
            text-align: center;
            line-height: 160%;
            font-weight: 100;
        }
        .main section.page3 .page_container {
            overflow: hidden;
            max-width: 85%;
            width: 100%;
        }
        .main section.page3 h1 {
            text-align: center;
            padding: 0;
            margin-bottom: 0;
            font-size: 70px;
            letter-spacing: -1px;
            color: #FFF;
        }
        .main section.page3 h2 {
            color: rgba(255,255,255,0.85);
            text-align: center;
            line-height: 160%;
            font-weight: 100;
            font-size: 21px;
        }
        .text-center {
            text-align: center;
        }

@media only screen and (max-width: 497px) {

.device-img{
  width:95%;}