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:
Selecting any option will automatically load the page