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

Optimize is rewriting my css selectors

[ Edited ]
Visitor ✭ ✭ ✭
# 8
Visitor ✭ ✭ ✭

I am going to use <style> tag in html as well. I have been running into the same issue this seems like an optimal solution until they fix whatever is changing css selectors. A quick question for all involved I have noticed this seems to be happening to me with ID tag selectors not so much with CLASS selectors can you all confirm if this is only happening to you with ID tags or have you experienced it with CLASS selectors as well?