如何消除macOS Safari实时文本功能强制注入的Shadow content？

我用React开发了一个使用图片映射（ImageMap）的站点，在Safari里遇到了棘手问题：只要图片包含文本，Live Text功能就会破坏图片交互——Safari会给<img>标签注入Shadow DOM内容，让图片里的文本可被选中，但光标落在这些文本区域时，图片的mouseenter、click等事件完全无法触发。

我试过几种方法都没用：

• 禁用img的用户选择：

img {
    -webkit-user-drag: none;
    -webkit-user-select: none !important;
}

• 试图隐藏注入的标签（Shadow DOM元素无法通过常规选择器访问，无效）：

#image-overlay {
    display: none !important;
    pointer-events: none !important;
}
div.image-overlay-line {
    display: none !important;
    pointer-events: none !important;
}

• 用JS选择注入的元素（Shadow DOM无法被常规选择器捕获，返回空）：

document.getElementById("image-overlay")
document.getElementsByClassName("image-overlay-line")

下面是几个实测有效的解决办法：

方法1：用伪元素覆盖图片拦截事件 #

给使用ImageMap的img添加专属类，通过伪元素铺满整个图片，将所有指针事件引导到图片本身，绕过Live Text的Shadow DOM干扰：

/* 给需要的img添加这个类 */
.img-imagemap {
    position: relative;
}

.img-imagemap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 1;
}

这个方法最简单，无需修改JS，仅通过CSS即可屏蔽Live Text的干扰。

方法2：针对Safari禁用Live Text #

利用Safari的私有特性，给指定图片禁用Live Text功能，需先检测浏览器：

// 判断当前是否为Safari浏览器
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

if (isSafari) {
    // 选中所有带usemap属性的图片
    const imagemapImgs = document.querySelectorAll('img[usemap]');
    imagemapImgs.forEach(img => {
        // 禁用触摸呼出菜单
        img.setAttribute('webkit-touch-callout', 'none');
        // 强制禁用用户选择
        img.style.webkitUserSelect = 'none';
        // 添加空touchstart监听，阻止Live Text触发
        img.addEventListener('touchstart', () => {}, { passive: true });
    });
}

在React中可将这段逻辑放到useEffect钩子中，确保图片加载完成后执行。

方法3：转Canvas渲染彻底规避 #

如果上述方法均无效，可将图片转换为Canvas渲染——Safari的Live Text无法识别Canvas内的文本，自然不会干扰交互：

function convertImgToCanvas(img) {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    
    // 复制原图片的usemap属性
    canvas.setAttribute('usemap', img.getAttribute('usemap'));
    // 替换原img元素
    img.parentNode.replaceChild(canvas, img);
    return canvas;
}

// React组件内调用
useEffect(() => {
    const img = document.querySelector('img[usemap]');
    if (img && isSafari) {
        convertImgToCanvas(img);
    }
}, []);

这个方法最彻底，但需注意Canvas的尺寸适配，避免图片缩放后清晰度下降。

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