zoho mail removes selectors with general sibling combinator `~`

[M-J-Robbins]

Zoho mail will remove selectors that include a general sibling combinator ~. However it will still add the prefix that targets the wrapping element, meaning those styles will be applied directly to the wrapping element.

So a style like this

.foo ~ .bar{
   display: none
}

With the normal zoho prefixing we would expect it to apply as

div.zm_123456789_parse_12345678 x_12345foo ~ .x_12345bar{
  display: none
}

But instead it is applied as

div.zm_123456789_parse_12345678{
  display: none
}

Which would apply to the wrapper around the outside of our message, and in this case it will hide the whole email.

---

Workaround

As a workaround, we can use this quirk to apply a fix that will undo the styles we don't want on the wrapper.

.zoho ~ .zoho{
  display: block;
}

It doesn't matter what the class name is we use here as it will be removed, but to avoid potential issues with other email clients, try and use a class name that doesn't appear anywhere in the email.

We can't add specificity within the selector or by using an !important flag, so to get this to override the unwanted styles we need to place it at the end of the stylesheet.

[M-J-Robbins]

Also worth noting here that we can't use a shortcut like all:unset as that isn't supported. And we can't set individual properties back to initial as that isn't supported either so we need to reset every style to a default value

.zoho ~ .zoho{
  height:auto;
  width:auto;
  display:block;
  padding:0;
  border:none;
  position:static;
  margin:0;
  text-align: left;
}

This is a good starting point but you may need more.