CSS filter produces incorrect colors in iOS 26.2 WebView (works fine on iOS 18.6.2)

Question

Created 18h

Replies 1

Boosts 0

Participants 2

I'm using a CSS filter to achieve dark mode for my HTML page. I know it's imperfect, but I have no choice for many reasons.

However, I found that the CSS filter produces incorrect colors in iOS 26.2 WebView, while it works fine in iOS 18.6.2 WebView.

Here is my HTML and CSS filter:

<html>
  <head>
    <style>
      .filter_container {
        /* invert colors for the entire page */
        filter: invert(1) hue-rotate(180deg);
      }
      .filter {
        /* restore colors for specific elements, such as img */
        filter: hue-rotate(180deg) invert(1);
      }
    </style>
  </head>
  <body>
    <div>original & bgcolor+filter & img+filter</div>
    <table>
      <tr>
        <td>
          <div style="display:flex; gap:1px; align-items:center; justify-content:center;">
              <div class="origin_container"><div class="origin" style="background-color:#FFFFFF; height:60px; width:60px; border-style: solid; border-color: #000000; border-width: 1px;"></div></div>
              <div class="filter_container"><div class="filter" style="background-color:#FFFFFF; height:60px; width:60px; border-style: solid; border-color: #000000; border-width: 1px"></div></div>
              <div class="filter_container"><img class="filter" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAdklEQVR4nOXOQQEAIACEMKR/57OFPliCnW0jRGIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkRmIkxt+B1y6HmAR0uIzOQQAAAABJRU5ErkJggg==" style="height:60px; width:60px; border-style: solid; border-color: #000000; border-width: 1px"></img></div>
          </div>
          <div style="text-align:center;">#FFFFFF</div>
        </td>
        ...many other colors
    </table>
  </body>
</html>

It works fine in iOS 18.6.2 WebView:

But renders incorrectly in iOS 26.2 WebView:

Boost

Answer 1

Frameworks Engineer OP

Apple

9h

Thank you for the report. This is a known issue that has been fixed via https://bugs.webkit.org/show_bug.cgi?id=302900. The fix will ship in a future OS update.

0