iOS手机访问autumna.co.uk站点首页搜索图片按钮偶发不显示问题

问题根因（均为iOS WebKit独有特性导致） #

• 动态修改display属性的重绘bug：iOS WebKit对初始处于display: none状态的父元素，当通过JS修改为可见状态时，偶尔不会触发子元素<img>的重绘流程，导致图片实际已加载但不渲染
• 图片懒解码策略：iOS默认不会对初始隐藏元素内的图片提前解码，父元素切换为可见时即时解码失败概率较高
• 代码触发时机兼容问题：当前JS代码仅在$(document).ready阶段设置父元素可见，iOS端DOMContentLoaded触发时机可能早于图片资源元数据解析完成，导致渲染异常

修复方案 #

1. 强制触发重排修复渲染bug
   在设置搜索按钮容器可见的代码后新增强制重排逻辑，修改后的$(document).ready对应代码如下：

$(document).ready(function () {
    change_care_type(initial_service_type);
    if (window.location.pathname == '/' ){
        // 原注释错误，此处是首页逻辑
        $('.search-service-type-btns').css('display','flex')
        // 新增：强制触发重排，修复iOS不渲染图片问题
        void $('.search-service-type-btns')[0].offsetHeight;
        $('.not-sure-div').css('display','block')
        void $('.not-sure-div')[0].offsetHeight;
    }
    if (!is_brand) {
        $('#myTab').css('display','flex')
    } else {
        $('#search-tabs').css('background-color', inactiveColor)
    }
})

2. 优化图片渲染配置
   给所有搜索按钮图片添加显式宽高、解码策略属性，示例：

<img class="search-button" decoding="sync" width="100%" height="auto" src="https://cdn.autumna.co.uk/prod/static/img/search/care-homes-selector-box.07a043b18e60.png" alt="Care Homes">

3. 替换隐藏逻辑（可选，适合问题严重场景）
   将初始隐藏的容器样式从display: none改为opacity: 0; visibility: hidden; height: 0; overflow: hidden;，显示时改为opacity: 1; visibility: visible; height: auto;，让图片提前完成加载解码，避免切换时的渲染异常。

验证建议 #

可通过Mac端Safari开发者工具连接iOS设备，复现问题时查看图片元素的计算样式、加载状态：若src正常、宽高正常但无渲染，说明是重绘bug，上述第一个方案即可解决。

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