[BUG #7717] On iOS7 the headers are partially covered by the browser'…

…s chrome in landscape view * Merge with Branch_3_0_x * Setting window.scrollTo(0,0) on orientationChange event. * Setting height of the root element to window.innerHeight because document.clientHeight is calculated 20px too big. * Adding a lower page offset for drawers about 20px.
qooxdoo · Sep 9, 2013 · 2e1fdad · 2e1fdad
1 parent 11e418a
commit 2e1fdad
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 14 deletions.
diff --git a/framework/source/class/qx/ui/mobile/core/Root.js b/framework/source/class/qx/ui/mobile/core/Root.js
@@ -142,6 +142,12 @@ qx.Class.define("qx.ui.mobile.core.Root",
         this.addCssClass("landscape");
         this.removeCssClass("portrait");
       }
+
+      // Bugfix #7717 - On iOS7 the headers are partially covered by the browser's chrome.
+      if(qx.core.Environment.get("os.name") == "ios") {
+        document.documentElement.style.height = window.innerHeight + "px";
+        window.scrollTo(0, 0);
+      } 
     }
   },
 

diff --git a/framework/source/resource/qx/mobile/css/android.css b/framework/source/resource/qx/mobile/css/android.css
@@ -75,6 +75,12 @@ img.no-content {
   -moz-transform: translate3d(0, 10000px, 0);
   transform: translate3d(0, 10000px, 0); }
 
+.root.ios .master-detail-master > * {
+  padding-bottom: 20px; }
+
+.ios .slider, .slider > div:after {
+  -webkit-backface-visibility: hidden; }
+
 input::-webkit-input-placeholder {
   line-height: normal; }
 
@@ -834,9 +840,6 @@ input, select, .text-area {
 .spinnerContainer .label, .spinnerContainer img {
   display: inline; }
 
-.ios .slider {
-  -webkit-backface-visibility: hidden; }
-
 .slider {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;

diff --git a/framework/source/resource/qx/mobile/css/indigo.css b/framework/source/resource/qx/mobile/css/indigo.css
@@ -75,6 +75,12 @@ img.no-content {
   -moz-transform: translate3d(0, 10000px, 0);
   transform: translate3d(0, 10000px, 0); }
 
+.root.ios .master-detail-master > * {
+  padding-bottom: 20px; }
+
+.ios .slider, .slider > div:after {
+  -webkit-backface-visibility: hidden; }
+
 input::-webkit-input-placeholder {
   line-height: normal; }
 
@@ -1029,9 +1035,6 @@ input, select, .text-area {
 .selectbox-unselected > .list-itemimage {
   display: none; }
 
-.ios .slider {
-  -webkit-backface-visibility: hidden; }
-
 .slider {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;

diff --git a/framework/source/resource/qx/mobile/css/ios.css b/framework/source/resource/qx/mobile/css/ios.css
@@ -75,6 +75,12 @@ img.no-content {
   -moz-transform: translate3d(0, 10000px, 0);
   transform: translate3d(0, 10000px, 0); }
 
+.root.ios .master-detail-master > * {
+  padding-bottom: 20px; }
+
+.ios .slider, .slider > div:after {
+  -webkit-backface-visibility: hidden; }
+
 input::-webkit-input-placeholder {
   line-height: normal; }
 
@@ -802,9 +808,6 @@ input, select, .text-area {
 .selectbox-unselected > .list-itemimage {
   display: none; }
 
-.ios .slider {
-  -webkit-backface-visibility: hidden; }
-
 .slider {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;

diff --git a/framework/source/resource/qx/mobile/scss/basic/_slider.scss b/framework/source/resource/qx/mobile/scss/basic/_slider.scss
@@ -2,11 +2,6 @@
 // SLIDER
 //
 
-.ios .slider {
-  // iOS6 flickering bug fix
-  -webkit-backface-visibility: hidden;
-}
-
 .slider {
   @include border-radius($slider-border-radius);
   @include gradient-vertical($slider-background-color, $slider-background-color-2);

diff --git a/framework/source/resource/qx/mobile/scss/common/_common.scss b/framework/source/resource/qx/mobile/scss/common/_common.scss
@@ -92,6 +92,18 @@ img.no-content {
   @include transform(translate3d(0,10000px,0));
 }
 
+// IOS BUGFIXES
+
+// Bugfix #7717 - On iOS7 the headers are partially covered by the browser's chrome.
+.root.ios .master-detail-master > * {
+  padding-bottom: 20px;
+}
+
+// iOS flickering bug fix for slider.
+.ios .slider, .slider > div:after{
+  -webkit-backface-visibility: hidden;
+}
+
 // WEBKIT ONLY
 
 input::-webkit-input-placeholder {