#156 parallax splash page: workaround for iOS 7

template/css/splash.css

@@ -19,7 +19,7 @@
 .bx-page-wrapper,
 #bx-content-container,
 #bx-content-main {
-	width: 100vw;
+	width: 100%;
 	margin: 0px;
 	padding: 0px;
 }
@@ -119,7 +119,7 @@
 /*--- Slide 1 ---*/
 
 #bx-spl-slide01 {
-    width:100vw;
+    width:100%;
     height:100vh;
 }
 #bx-spl-slide01 .bx-spl-bg {
@@ -130,7 +130,7 @@
 #bx-spl-slide01 .bx-spl-slide-video {
     object-fit: cover;
 
-	width: 100vw;
+	width: 100%;
 	height: 100vh;
 }
 
@@ -172,7 +172,7 @@
 /*--- Slide 3 ---*/
 
 #bx-spl-slide03 {
-    width:100vw;
+    width:100%;
     height:150vh;
 }
 #bx-spl-slide03 .bx-spl-bg {
@@ -185,7 +185,7 @@
 /*--- Slide 4 ---*/
 
 #bx-spl-slide04 {
-    width:100vw;
+    width:100%;
     height:100vh;
 }
 #bx-spl-slide04 .bx-spl-bg {

template/splash.html

@@ -57,6 +57,29 @@
 	</div>
 	<script type="text/javascript">
 		$(document).ready(function () {
+
+            // workaround for iOS 7 
+            if (!!navigator.userAgent.match(/i(Pad|Phone|Pod).+(Version\/7\.\d+ Mobile)/i)) {
+                var aSelVh = {
+                    '1': '#bx-spl-slide01, #bx-spl-slide01 .bx-spl-slide-video, #bx-spl-slide04',
+                    '1.5': '#bx-spl-slide03'
+                };
+                var aSelVw = {
+                    '0.35': '#bx-spl-slide02 .bx-spl-bg'
+                };
+                function fixMobileSafariViewport() {
+                    $.each(aSelVh, function (sVal, sSel) {
+                        $(sSel).css('height', window.innerHeight * parseFloat(sVal));
+                    });
+                    $.each(aSelVw, function (sVal, sSel) {
+                        $(sSel).css('height', window.innerWidth * parseFloat(sVal));
+                    });                
+                }
+                // listen to portrait/landscape changes
+                window.addEventListener('orientationchange', fixMobileSafariViewport, true);
+                fixMobileSafariViewport();
+            }
+
 			skrollr.init();
 		});
 	</script>

template/splash_logo.html

@@ -1,3 +0,0 @@
-<div class="bx-splash-logo">
-	<span class="bx-spl-green">online</span><span class="bx-spl-gray">.me</span>
-</div>