移动端Safari/Chrome下绝对定位Lity锚点链接仅小范围可点击

数据老陈

2026-10-3

问题原因

移动端WebKit内核（Safari、Chrome移动端均基于该内核）对无背景色的绝对定位可交互元素，存在点击区域识别异常的兼容性问题，同时a标签内部的img元素会默认拦截点击事件，导致内部区域无法触发模态框弹出。

修复方案

只需修改两处CSS即可解决问题：

给.videoLink添加透明背景，让内核识别完整的可点击区域
显式声明a标签内部的img不拦截点击事件

修改后的完整SCSS代码如下：

.featured-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    z-index: 100;
    pointer-events: none;
    border: 1px solid blue;
    .videoLink {                
        position: absolute;
        top: 0;
        left: 50%;
        width: 90%;
        height: 90%;
        transform: translateX(-50%);
        z-index: 101;
        display: block;
        border: 1px solid limegreen;
        pointer-events: auto;
        /* 新增以下两行修复点击问题 */
        background: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
        /* 新增img样式，禁止图片拦截点击 */
        .videoImage {
            pointer-events: none;
        }
    }
}
.yt-thumb-button {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(https://cdn11.bigcommerce.com/s-za3wv/product_images/uploaded_images/youtube-grey-play.png) no-repeat center center;
    background-size: 20%;
    color: transparent !important;
    pointer-events: none;
    border: 1px solid red;
    &:hover {
        opacity: .4;
        transition: opacity .2s ease-out;
    }
}