Mobile Safari - Position of Background Images

Question

After reading through a lot of articles I have managed narrow down my problem. However I am still confused on how to resolve the issue.

The Problem: I have an index.php file that has 8 div boxes called .fillwindow within these div boxes display different background images & videos.

The website works fine on a desktop (window needs to be around 1680x1050, currently working on the smaller resolutions now). But when viewed on an iPhone there are some issues when it comes to the fullscreen of imagery. The images seem to be incredibly zoomed in and the website is unusable. (only on the index page, the sub pages are ok - to an extent.)

From what I've read there seems to be issues with the background-size:cover; and the background-attachment:fixed; for mobile iOS. So I experimented with the background-attachment set to scroll and the background-size set to 100% 100% but that did not work either.

I've created in the CSS, a media query making the video tags display:none; and display a replacement image if the viewport is less than 768px.

in the header.php file I've attached this meta tag <meta name="viewport" content="width=device-width, initial-scale=1">

So after fiddling around with different values and properties I still can not manage to find a solution.

Here is the link to the website for those who are willing to have a look. - www.dejavusake.com.au , and here is a sub page to view on mobile to compare from the index.php - www.dejavusake.com.au/portfolio

here is a section of the HTML markup.

<div class="fillwindow" style="background-image:url('http://dejavusake.com.au/wp-content/uploads/2015/05/Moromi_in_Clothbag.jpg')">
    <div  class="landing__logo">
        <img  class="landing__logo-img" src="http://dejavusake.com.au/wp-content/uploads/2015/04/Deja_Vu_Sake_Co_Wordmark_REV-01.png">
    </div>
</div>

 <div class="fillwindow" id="portfolio" style="background-image:url('http://dejavusake.com.au/wp-content/uploads/2015/05/Steamed_Rice.jpg')">
    <div class="nav-header">
        <img src="<?php home_url(); ?>wp-content/themes/dejavu_theme/images/Portfolio-01.png">
    </div>
    <a href="<?php home_url(); ?>portfolio" class="js-navBtn"><div class="nav-hitstate"></div></a>      
    <div class="img__description"><i class="fa fa-circle circle-style"></i><p> <span style="color:#00ff00">Mushi</span> mai rice steamng, the first task each morning</p></div>         
</div>

<div class="fillwindow" id="styles">
    <div class="fillwindow-videoWrap">  
        <video class="fillwindow-video" autoplay loop muted poster="<?php home_url(); ?>wp-content/themes/dejavu_theme/images/styles-sml.png">
            <source src="http://dejavusake.com.au/wp-content/uploads/2015/06/Rice_Sorting_Compressed.mp4" type="video/mp4" autoplay loop mute />
        </video>
        <img class="sml-replace-img" src="<?php home_url(); ?>wp-content/themes/dejavu_theme/images/styles-sml.png">
    </div>
    <div class="nav-header">
        <img src="<?php home_url(); ?>wp-content/themes/dejavu_theme/images/Styles-01.png">
    </div>
    <a href="<?php home_url(); ?>styles" class="js-navBtn"><div class="nav-hitstate"></div></a>         
    <div class="img__description"><i class="fa fa-circle circle-style"></i><p> <span style="color:#00ff00">Koji room</span> the heart of the sake brewing process</p></div>
</div>

Here is the CSS:

.fillwindow {
   height: 100vh; 
   /*outline: 1px solid red;*/
   background-color: #000;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   position: relative;
   overflow: hidden;
}