Safari中background-color: inherit父元素更新时不生效的问题咨询

问题背景 #

为了让网站部分元素背景色与body保持一致，避免重复定义颜色，我给所有元素添加了以下CSS规则：

* {
  background-color: inherit;
}

网站支持明暗模式及高低对比度模式切换，但在Safari中出现异常：关闭暗黑模式时，部分元素背景色仍保持深色。其中color: inherit可以正常更新文字颜色，但背景色无法同步更新。

Safari中的具体异常表现 #

在Safari iOS 16.3和16.4中观察到以下现象：

• 首次从亮色模式切换到暗色模式，一切正常；
• 从暗色模式切回亮色模式时，body的直接子元素背景色无法立即更新；
• 滚动页面或截图后，异常常自动修复，但并非每次都有效；
• <footer>的子元素仅在刷新页面后才能恢复正常背景色。

MacBook端Safari也存在同类问题，但触发条件有所不同。

已尝试的缓解措施 #

1. 针对<footer>子元素添加CSS规则：

footer * {
  background-color: transparent;
}

但受background-color: inherit影响的其他元素仍存在问题。

2. 在主题切换函数中加入以下JavaScript代码后，问题似乎得到解决：

const main = document.querySelector('main');
main.hidden = true;
setTimeout(() => main.hidden = false, 1);

但这里有个奇怪的点：必须设置1ms的延迟。如果设为0ms，<main>的子元素背景色会正确更新，但<main>自身的背景色会异常，导致边距区域颜色错误。

另外，Chrome可以正常处理该背景色切换，因此不想让Chrome出现元素隐藏再显示的闪烁效果。而检测Safari的方式中，navigator.userAgent不可靠，只能通过已弃用的navigator.vendor === 'Apple Computer, Inc.'来判断。

核心疑问 #

1. 为什么Safari对background-color: inherit存在这类兼容问题？
2. 该如何正确解决这个主题切换时的背景色更新异常？

内容的提问来源于stack exchange，提问作者Bbrk24