CSS类切换后样式未渲染 调整浏览器窗口大小才生效

部分CSS规则在Chrome开发者工具中显示已正确匹配应用，但实际页面并未生效，只有调整浏览器窗口大小（哪怕仅拉伸1-2像素）强制浏览器更新渲染后，对应样式才会正常显示。

问题详情 #

• 异常表现：元素某一角的圆角始终保持10px，尽管对应CSS规则已明确设置该圆角值为0px。
• 触发流程：点击<tr>（对应截图中深蓝色表格行）时，会展开该行下方原本隐藏的子行（白色行），该操作通过classList.toggle切换类名触发CSS更新。开发者工具中可看到对应样式规则已正确匹配，但样式并未实际渲染生效。
  
• 初步排查：编写简化版代码片段尝试复现问题时，CSS可正常生效，说明基础代码逻辑不存在语法错误。

咨询诉求：有没有开发者在实际开发中遇到过同类问题？该问题的可能诱因是什么？

复现代码片段 #

JavaScript 交互逻辑

$('tr.clickable').on('click', (e) => {
  $(e.currentTarget).toggleClass('open')
  e.target.parentElement.nextElementSibling.classList.toggle('shown')
})

CSS 样式规则

body {background-color: #dadbd6}

table {
  width: 100%;
  table-layout: fixed;
}

tr {
  color: #fff;
  filter: 
    drop-shadow(0px 0.1em 0.1em rgba(0, 0, 0, 40%)) /* 主阴影 */
    drop-shadow(0px 1px 4px rgba(255, 255, 255, 20%))
    drop-shadow(0px 1px 0px rgba(0, 0, 0, 30%));
}

tr.open {background-color: #bb0000}
tr.childrow:not(.shown) {display: none}

td {padding: 20px;}
tr:not(.open) {background-color: #000}

tr td:nth-child(1) {width: 5%; border-radius: 10px 0 0 10px}  
tr td:nth-child(2) {width: 5%}  
tr td:nth-child(3) {width: 40%}  
tr td:nth-child(4) {width: 15%}  
tr td:nth-child(5) {width: 10%}
tr td:nth-child(6) {width: 10%}
tr td:nth-child(7) {width: 10%} 
tr td:nth-child(8) {width: 5%} 

tr:not(.open) td:nth-child(8) {border-radius: 0 10px 10px 0} 
tr.open td:nth-child(8) {border-radius: 0 10px 0 0}
tr.open td:nth-child(1) {border-radius: 10px 0 0 0}
tr.childrow td {border-radius: 0 0 10px 10px}

HTML 页面结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class='clickable'>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
  </tr>
  <tr class='childrow'>
    <td colspan="8">I am no longer hidden</td>
  </tr>
</table>

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