Permalink
Browse files

WebKit adjacent/general sibling and pseudo class bug

  • Loading branch information...
1 parent 36c88d4 commit 79bc7e0ca6d278feaf54a5085e3d6b37905c9202 @Thibaut Thibaut committed Jun 6, 2012
Showing with 18 additions and 3 deletions.
  1. +1 −1 21-toggle-switches/README.md
  2. +7 −0 21-toggle-switches/css/style.css
  3. +10 −2 21-toggle-switches/scss/style.scss
@@ -16,7 +16,7 @@ To compile and watch:
## Browser Compatibility
-Firefox 4+, Safari 4+, Chrome 13+, Opera 10+, Internet Explorer 9+.
+Firefox 4+, Safari 5.1+, Chrome 13+, Opera 10+, Internet Explorer 9+.
## Credits
@@ -122,6 +122,12 @@ body {
padding-right: 2px;
}
+/*
+ * Note: using adjacent or general sibling selectors combined with
+ * pseudo classes doesn't work in Safari 5.0 and Chrome 12.
+ * See this article for more info and a potential fix:
+ * http://css-tricks.com/webkit-sibling-bug/
+ */
.switch-input {
display: none;
}
@@ -142,6 +148,7 @@ body {
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
left: 60px;
+ /* Note: left: 50%; doesn't transition in WebKit */
}
.switch-selection {
@@ -66,6 +66,13 @@ $labelWidth: 58px;
.switch-label-off { padding-left: 2px; }
.switch-label-on { padding-right: 2px; }
+/*
+ * Note: using adjacent or general sibling selectors combined with
+ * pseudo classes doesn't work in Safari 5.0 and Chrome 12.
+ * See this article for more info and a potential fix:
+ * http://css-tricks.com/webkit-sibling-bug/
+ */
+
.switch-input {
display: none;
@@ -77,8 +84,9 @@ $labelWidth: 58px;
@include transition-property(color, text-shadow);
}
- // { left: 50%; } doesn't transition in WebKit
- &:checked + .switch-label-on ~ .switch-selection { left: $labelWidth + 2px; }
+ &:checked + .switch-label-on ~ .switch-selection {
+ left: $labelWidth + 2px; /* Note: left: 50%; doesn't transition in WebKit */
+ }
}
.switch-selection {

0 comments on commit 79bc7e0

Please sign in to comment.