Snippets

Appirio UX SF1 iOS page height bug

Created by Former user

File sf1-ios-bug.css Added

  • Ignore whitespace
  • Hide word diff
+/* This will resolve the issues related to buttons and / or dropdowns that erroneously bring you back to the top of the page when they are clicked */
+
+@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
+  html {
+    position: fixed;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+  }
+  html body {
+    position: fixed;
+    overflow-x: scroll;
+    height: 100%;
+    width: 100%;
+  }
+}
+@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
+  html {
+    position: fixed;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+  }
+  html body {
+    position: fixed;
+    overflow-x: scroll;
+    height: 100%;
+    width: 100%;
+  }
+}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
+  html {
+    position: fixed;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+  }
+  html body {
+    position: fixed;
+    overflow-x: scroll;
+    height: 100%;
+    width: 100%;
+  }
+}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
+  html {
+    position: fixed;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+  }
+  html body {
+    position: fixed;
+    overflow-x: scroll;
+    height: 100%;
+    width: 100%;
+  }
+}
+@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) {
+  html {
+    position: fixed;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+  }
+  html body {
+    position: fixed;
+    overflow-x: scroll;
+    height: 100%;
+    width: 100%;
+  }
+}
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.