Zoho renders code inside any `@supports` query

Email Client Zoho Mail

Operating System So far, I've only looked at the Android app, but may be others too

Expected Result @supports query should only render when the specified style is supported.

Actual Result @supports query is removed but content inside stays.

Steps to reproduce

Code sample

<!DOCTYPE html>
<html lang="en">
<head>
<style>
@supports(-webkit-background-clip: text) and (-webkit-text-fill-color: transparent){
  .gradient-text {
    background: linear-gradient(107deg, #8454F2 8.69%, #F35EED 108.33%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
</head>
<body class="body">
  <h1 class="gradient-text">
    Testing gradient text
  </h1>
</div>
</body>
</html>

Screenshots

Additional context The style in the above code sample will have the @supports removed and get the regular Zoho prefix to end up looking like

div.zm_8684394180049235911_parse_-2979550655239837207 .x_-1217086212gradient-text {
  background: linear-gradient(107deg, rgb(132, 84, 242) 8.69%, rgb(243, 94, 237) 108.33%) 
}

To get around this, we need to add a @supports not query to unset the styles

@supports not (-webkit-background-clip: text) {
  .gradient-text {
    background:none;
  }
}

hteumeuleu / email-bugs

Zoho renders code inside any `@supports` query #134