iPad Safari中display:none的TR无法重新显示，添加alert()却修复问题

原因分析 #

1. 表格元素布局规则冲突：<tr>元素的默认display属性值是table-row，你代码里把要显示的行设为display:block，这会破坏Safari表格布局的渲染上下文，导致后续无法正常恢复显示。其他浏览器对这种非标准的表格元素display值兼容性更好，但Safari的渲染引擎对表格布局的校验更严格。
2. 渲染队列优化延迟：Safari会批量处理DOM样式修改以提升性能，可能导致样式更新没有立即触发重绘。添加alert()时，弹窗会阻塞JS执行，同时强制浏览器清空渲染队列完成重绘，所以界面能正常更新；搜索框为空时可能触发了浏览器的默认重置逻辑，同样会强制重绘。

解决方案 #

方案1：使用表格元素标准display值 #

把设置行显示的代码从rows[i].style.display = 'block'改成rows[i].style.display = 'table-row'，这是<tr>元素的标准display属性值，完全符合Safari的表格渲染规则。

修改后的完整代码：

const searchBox = document.getElementById('search-box');
const customerTable = document.getElementById('listTable');

if (searchBox) {
    searchBox.addEventListener('input', function () {
        var numResults = 0;

        const searchValue = searchBox.value.toLowerCase();
        const rows = customerTable.getElementsByTagName('tr');

        for (let i = 1; i < rows.length; i++) {
            const customerName = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
            if (customerName.includes(searchValue)) {
                rows[i].style.display = 'table-row'; // 改为table-row
                numResults++;
            } else {
                rows[i].style.display = 'none';
            }
        }

        return true;
    });
}

方案2：强制触发浏览器重绘 #

如果不想修改display值，也可以在样式修改完成后，强制浏览器触发重绘，比如访问元素的offsetHeight属性（读取布局属性会强制浏览器完成渲染队列）：

const searchBox = document.getElementById('search-box');
const customerTable = document.getElementById('listTable');

if (searchBox) {
    searchBox.addEventListener('input', function () {
        var numResults = 0;

        const searchValue = searchBox.value.toLowerCase();
        const rows = customerTable.getElementsByTagName('tr');

        for (let i = 1; i < rows.length; i++) {
            const customerName = rows[i].getElementsByTagName('td')[0].textContent.toLowerCase();
            if (customerName.includes(searchValue)) {
                rows[i].style.display = 'block';
                numResults++;
            } else {
                rows[i].style.display = 'none';
            }
        }

        // 强制触发重绘
        void customerTable.offsetHeight;

        return true;
    });
}

优先推荐方案1，因为它遵循HTML表格元素的标准布局规则，不会引入潜在的渲染兼容性问题。

内容的提问来源于stack exchange，提问作者Winteryear Studios LA