Commented Code Removed After Using Visual Editor

For the cursor defaulting to the top of the window causing the scroll jumping, I don’t see the jumping effect in Firefox. But in both Chrome and Firefox, after saving the CSS or clicking the Custom CSS link in the left sidebar and then clicking in the editor window, the cursor still defaults to the beginning of the code at the top so I still have to manually scroll and click a second time to place the cursor where I want it for editing.

Here is CSS code that contains commented code that is being stripped out.

This is the CSS before using the Visual Editor:

/* BLOCKQUOTE FORMATTING*/
blockquote {
  color: #000;
  background: #eee;
  margin: 0 0 1.6em 0.8em;
  padding: 1.4em 1em 0.1em 1em;
  border-left: 5px solid #7F1315;
}

blockquote:before {
  display: none;
}

/* INCREASE SPACE BETWEEN PARAGRAPHS */
#content p {
  margin-bottom: 15px;
} 

/*ALIGN VIEW CART LINK*/
a.added_to_cart.wc-forward {
  position: absolute;
  display: block;
  bottom: -30px;
  margin-left: 60px;
}

/*ALIGN ADD TO CART BUTTONS*/
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  min-height: 440px !important;
  margin-bottom: 70px;
}

a.button.add_to_cart_button, a.button.product_type_simple {
  bottom: 0px;
  position: absolute;
  margin-left: -65px;
}

/* BOLD SHOP PRICES */
.amount {
  font-size: 18px;
  font-weight: bold;
}

This is the same CSS after clicking on the Visual Editor icon then switching back to the normal editor. Note that the commented code is missing:

li {
  margin: 0 0 0.5em 0;
  padding: 0;
}


blockquote {
  color: #000;
  background: #eee;
  margin: 0 0 1.6em 0.8em;
  padding: 1.4em 1em 0.1em 1em;
  border-left: 5px solid #7F1315;
}

blockquote:before {
  display: none;
}


#content p {
  margin-bottom: 15px;
} 


a.added_to_cart.wc-forward {
  position: absolute;
  display: block;
  bottom: -30px;
  margin-left: 60px;
}


.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  min-height: 440px !important;
  margin-bottom: 70px;
}

a.button.add_to_cart_button, a.button.product_type_simple {
  bottom: 0px;
  position: absolute;
  margin-left: -65px;
}


.amount {
  font-size: 18px;
  font-weight: bold;
}

Yes, I’m using 1.0.7. I disabled all other plugins, cleared the cache and tested your plugin and still get the same issue. I also switched to the Twenty Fifteen theme and tested the same CSS code to see if perhaps my theme was causing a conflict and I still get the same issue using a different theme also. I have also tested in both Chrome and Firefox and see the same thing in both. I’m not sure what else could be causing this unless there is something specific to my server that is an issue.

The account is created.

I have just tried on 3 different computers (one PC and 2 Macs) using 3 different browsers (Chrome, Firefox and Safari) with the same results. I want to clarify that not every single comment is removed, but most of them are.

For example, the first comment is never removed:

/* LIST FORMATTING */

But this comments down a little from that one is removed:

There are certain other comments that stay consistently for some reason further down in the code.

When testing using your temporary login, please double check and let me know if you are seeing all of my comments staying intact or only the ones I’ve been ending up with after most of the comments are stripped.

Could it be that there may some hidden characters (such as delimiters) that your plugin is seeing and is stripping which may be affecting the comments?

OK, I have narrowed the issue down to something interesting that I can reproduce consistently. My issue is related to the @media CSS rule. It seems that when this rule appears in my code, CSS comments on those code snippets are stripped out along with comments on other random snippets that don’t use the @media rule.

Here’s an example of what I mean. The first snippet below doesn’t use the @media rule. The second one does:

/* BOLD SHOP PRICES */.amount {  font-size: 18px;  font-weight: bold;}/* MAKE FOOTER WIDGETS RESPONSIVE ON MOBILE */@media screen and (max-width: 800px) {  .footer-widgets .col3-1 {    width: 100%;    margin: 0 auto;  }}

If I click on the visual editor button and then come back, you’ll see that the comment on the second snippet is stripped:

/* BOLD SHOP PRICES */.amount {  font-size: 18px;  font-weight: bold;}@media screen and (max-width: 800px){  .footer-widgets .col3-1 {    width: 100%;    margin: 0 auto;  }}

In this case, the comment on the first snippet wasn’t affected but, for some reason, as long as the @media rule is present in my editor, the comments are consistently removed from snippets using the @media rule and randomly from other snippets that don’t use it.

Here is a screen capture showing what I see happen when the @media rule is present in my CSS. Also note that the selector drop down on the visual editor screen doesn’t show the elements in the drop down but as one long line.:

Here is another screen capture without the @media rule included. You’ll see that all of my comments remain intact. Note that the visual editor drop down behaves normally in this case:

I’m not sure why some snippets that don’t use the @media rule are affected by this issue but after much testing, this is clearly what is causing the issues for me.

I see that version 1.0.8 was released today (8-15-16). Is this release intended to fix the @media issue? If so, I just did some tests and see that the issue is still happening for me.

I did just try to post my full custom CSS here for you but the forum won’t allow me to paste it here due to its length. If you have another method that I could send my custom CSS to you for testing, please let me know. Thanks!