Merge pull request #1746 from google/consecutive-adjacent-selectors

Consecutive `+` CSS selectors sometimes cause problems in WebKit.
This commit is contained in:
Sérgio Gomes 2015-10-15 10:39:01 +01:00
commit 978cf71a1a
2 changed files with 17 additions and 4 deletions

View File

@ -178,6 +178,11 @@
.mdl-mega-footer--heading-checkbox:checked, .mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked { .mdl-mega-footer__heading-checkbox:checked {
// WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
// break consecutive "+" operators in some cases. Therefore, we need to use
// both here to cover all the bases.
& ~ .mdl-mega-footer--link-list,
& ~ .mdl-mega-footer__link-list,
& + .mdl-mega-footer--heading + .mdl-mega-footer--link-list, & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
& + .mdl-mega-footer__heading + .mdl-mega-footer__link-list { & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
display: none; display: none;
@ -268,8 +273,13 @@
} }
.mdl-mega-footer--heading-checkbox:checked, .mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked { .mdl-mega-footer__heading-checkbox:checked {
& + .mdl-mega-footer--heading + .mdl-mega-footer__link-list, // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
& + .mdl-mega-footer__heading + .mdl-mega-footer--link-list { // break consecutive "+" operators in some cases. Therefore, we need to use
// both here to cover all the bases.
& ~ .mdl-mega-footer--link-list,
& ~ .mdl-mega-footer__link-list,
& + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
& + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
display: block; display: block;
} }

View File

@ -481,8 +481,11 @@ a img{
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} }
.android-search-box.is-focused + .android-navigation-container + /* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
.android-mobile-title { consecutive "+" operators in some cases. Therefore, we need to use both
here to cover all the bases. */
.android.android-search-box.is-focused ~ .android-mobile-title,
.android-search-box.is-focused + .android-navigation-container + .android-mobile-title {
opacity: 0; opacity: 0;
} }