I’m creating a site that uses imagemap using React. However, in Safari, because of Live Text feature, it won’t make me interact with images when there is text in it. I found that Safari injects “Shadow content” to <img> tag to make text selectable in image:capture of inspector

What should I do to get rid of that feature using css/js?

Disabling user selection on <img> tag did nothing:

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

I tried to hide injected tags, but it didn’t do anything:

#image-overlay {
    display: none !important;

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

Also, selecting injected element using JS didn’t work:

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

Expectation: Image related events such as mouseenter or click should fire regardless of cursor’s location

Result: They don’t fire when cursor is on text