Optimize
3.2K members online now
3.2K members online now
Learn how to create your first experiment and get tips on creating A/B, redirect, and multivariate tests.
Guide Me
star_border
Reply

Media Query Support is bugged due to an over-zealous css optimization script.

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

I've run into an issue when I try to use CSS Media Queries.

 

It seems as if a script is attempting to clean the css by finding any matching styles in any matching css selector block and removing all but the last one entered.  By itself, this is a great idea. The problem is that it is not respecting the selectors inside of media queries as being distinct from those outside. As a result this:

.floating-button {
  color : white;
  font-size : 12px;
}
.floating-button.right {
right : 10px;
}
@media screen and (min-width: 981px) { .floating-button { font-size : 14px; }
.floating-button.right {
right : 50px;
}
}


Gets simplified to this:

.floating-button {
  color : white;
}
@media screen and (min-width: 981px) {
  .floating-button {
    font-size : 14px;
  }
  .floating-button.right {
right : 50px;
}
}


Which obviously is quite wrong and will not work as I need it to.  Please correct this ASAP!  In the meantime, it is possible to workaround the issue by using distinct selectors inside the media queries:

.floating-button {
  color : white;
  font-size : 12px;
}
.floating-button.right {
 right : 10px;
}
@media screen and (min-width: 981px) {
  button.floating-button {
    font-size : 14px;
  }
  button.floating-button.right {
    right : 50px;
  }
}

Thank you for your prompt attention!

1 Expert replyverified_user
1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by topic author Joe B
April 2017

Media Query Support is bugged due to an over-zealous css optimization script.

Google Employee
# 2
Google Employee

Thanks for reporting this, should be fixed in the next 1-2 weeks.

Also thanks for the workaround.

View solution in original post

Marked as Best Answer.
Solution
Accepted by topic author Joe B
April 2017

Media Query Support is bugged due to an over-zealous css optimization script.

Google Employee
# 2
Google Employee

Thanks for reporting this, should be fixed in the next 1-2 weeks.

Also thanks for the workaround.