Bug 619636 - Chrome scrollbars have 1px black borders on the sides on devices [r=mfinkle]
authorVivien Nicolas <21@vingtetun.org>
Tue, 21 Dec 2010 19:17:30 +0100
changeset 67149 43dc8694c2da174065cd0168c97bff3ea8da0800
parent 67148 0017ae08ab8fe058599ea2590b6afb2a5eb98b82
child 67150 b8cd409005013b52b9affda4d1d97332223c62a0
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs619636
Bug 619636 - Chrome scrollbars have 1px black borders on the sides on devices [r=mfinkle]
mobile/chrome/content/content.css
--- a/mobile/chrome/content/content.css
+++ b/mobile/chrome/content/content.css
@@ -43,79 +43,99 @@
 * > *:not(embed):focus, * > *:focus > font {
   outline: 2px solid #8db8d8 !important;
   /*
     XXX How do I preserve mac focusring without blowing focus color on other platforms?
     outline-color: -moz-mac-focusring !important;
   */
 }
 
-*:link:focus, *:visited:focus {
+*:-moz-any-link:focus {
   outline-offset: -2px;
 }
 
 /* Style the scrollbars */
+html xul|scrollbar {
+  display: none;
+}
+
+xul|window xul|scrollbar {
+  display: block;
+}
+
 xul|scrollbar[orient="vertical"] {
   -moz-appearance: none !important;
   opacity: 0;
   position: relative;
   margin-left: -8px;
   min-width: 8px;
   background-color: transparent !important;
   background-image: none !important;
+  border: 0px solid transparent !important;
+}
+
+xul|scrollbar[orient="vertical"] xul|thumb {
+  max-width: 6px !important;
+  min-width: 6px !important;
 }
 
 xul|scrollbar[orient="horizontal"] {
   -moz-appearance: none !important;
   opacity: 0;
   position: relative;
   min-height: 8px;
   margin-top: -8px;
   background-color: transparent !important;
   background-image: none !important;
+  border: 0px solid transparent !important;
+}
+
+xul|scrollbar[orient="horizontal"] xul|thumb {
+  max-height: 6px !important;
+  min-height: 6px !important;
 }
 
 xul|*[panning="true"] xul|scrollbar {
   opacity: 1;
 }
 
-
-xul|scrollbar[orient="vertical"] xul|thumb {
-  max-width: 6px !important;
-}
-
-xul|scrollbar[orient="horizontal"] xul|thumb {
-  max-height: 6px !important;
-}
-
 xul|scrollbox {
   overflow-y: scroll;
   overflow-x: scroll;
 }
 
 xul|scrollbarbutton {
+  min-height: 8px !important;
+  min-width: 8px !important;
   -moz-appearance: none !important;
-  display: none !important;
+  visibility: hidden;
+}
+
+xul|scrollbarbutton[sbattr="scrollbar-up-top"],
+xul|scrollbarbutton[sbattr="scrollbar-bottom-top"] {
+  display: none;
 }
 
 xul|thumb {
   background-color: rgba(0, 0, 0, 0.4) !important;
   -moz-border-top-colors: none !important;
   -moz-border-bottom-colors: none !important;
   -moz-border-right-colors: none !important;
   -moz-border-left-colors: none !important;
   border: 1px solid rgba(255, 255, 255, 0.4) !important;
   -moz-border-radius: 3px;
 }
 
 select:not([size]):not([multiple]) > xul|scrollbar,
 select[size="1"] > xul|scrollbar,
 select:not([size]):not([multiple]) xul|scrollbarbutton,
 select[size="1"] xul|scrollbarbutton {
-  display: block !important;
+  display: block;
+  margin-left: 0;
+  min-width: 16px;
 }
 
 /* Override inverse OS themes */
 select,
 textarea,
 button,
 xul|button,
 * > input:not([type="image"]) {