Optimize
2.1K members online now
2.1K 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

Optimize is rewriting my css selectors

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

While working on a larger test for a client, I ran into an issue where the css cleaning utility began actually rewriting my selectors.

 

Before: 

p.vid-desc {
    width: 100%;
    text-align: center;
    font-size: 26px;
    color: #333;
}

p.vid {
    position: relative;
    text-align: center;
}

p.video-full-width {
    position: absolute;
    width: 100%;
    margin-top: 3rem;
}

.vid img {
    max-width: 50vw;
}

After:

#page>div:nth-of-type(8)>div>div>div>div:nth-of-type(2)>div:nth-of-type(2)>div:nth-of-type(2)>p:nth-of-type(4) {
  width : 100%;
  text-align : center;
  font-size : 26px;
  color : rgb(51, 51, 51);
}

#page>div:nth-of-type(8)>div>div>div>div:nth-of-type(2)>div:nth-of-type(2)>div:nth-of-type(2)>p:nth-of-type(5) {
  position : relative;
  text-align : center;
}

p.video-full-width {
  position : absolute;
  width : 100%;
  margin-top : 3rem;
}

#page>div:nth-of-type(8)>div>div>div>div:nth-of-type(2)>div:nth-of-type(2)>div:nth-of-type(2)>p:nth-of-type(5)>img:nth-of-type(1) {
  max-width : 50vw;
}


Needless to say, this is a breaking issue that makes Google Optimize completely unusable.

Note: I tried to reproduce this issue this morning but the css saved fine today. Go figure.

1 Expert replyverified_user

Optimize is rewriting my css selectors

Visitor ✭ ✭ ✭
# 2
Visitor ✭ ✭ ✭

Aha. I was able to get it to reproduce this morning. I duplicated the test to a new variation and tried to save the css there as well and the issue re-occurred.  Here are the full css scripts:
https://pastebin.com/v8UiA2KW

Optimize is rewriting my css selectors

Google Employee
# 3
Google Employee

Thanks for reporting the problem. Would it be possible to share the page url or your container ID?

As far as I understand, the steps to reproduce this is:

- Use the CSS that you have above on an variation on your page

- Make a copy of that variation

- Load the CSS code dialog, which will have the "clean button" enabled, and click it right?

 

 

Optimize is rewriting my css selectors

Optimize is rewriting my css selectors

Visitor ✭ ✭ ✭
# 5
Visitor ✭ ✭ ✭

There are a number of things I did to produce this issue but they all boil down to this:
I create a new variation for this test and pasted in this css and tried to save it.  BAM. That's all.

When I first ran into the issue, I tried to replace the overwritten selectors with the correct ones and re-save. This resulted in the system overwriting those again and more selectors elsewhere.  The next thing I tried was removing all the css from the weird selectors on down and resave. This seemed to work fine.  Then I added the other css rules back in one at a time. After the 5th rule, it garbled them again. That's when I gave up and went home for the night. The next morning I came back and just pasted the whole shebang in once more and saved, expecting the issue to re-occur. It didn't. Hence my note that it didn't reproduce that morning. Then I created a new variation and pasted the css there as well and bam, it did it again.  

Optimize is rewriting my css selectors

Visitor ✭ ✭ ✭
# 6
Visitor ✭ ✭ ✭

I've found that as long as I have my css in a blob I can paste in, then I can just paste it, clean&save, then check it. If it's garbled, repeat.  It takes three attempts to get the css to save properly.  Yes, exactly three so far.

Optimize is rewriting my css selectors

[ Edited ]
Visitor ✭ ✭ ✭
# 7
Visitor ✭ ✭ ✭

We have been experiencing the same issue.  The CSS 'clean' was completely rewriting class and id selectors with "div:nth-of-type(X)"

 

Our solution was to add the CSS as HTML, and wrapping it in a <style> tag.

 

Did you end up finding a better solution?