iPhone Safari中home-sci元素显示异常的跨端兼容解决方案

问题说明 #

类名为home-sci的容器内元素在iPhone Safari浏览器中出现显示变形，但Chrome调试工具显示正常，项目部署到线上后iPhone设备端出现该异常，需确保网页在不同浏览器及设备间显示一致。

相关代码 #

HTML代码 #

<section class="home" id="home">
    <div class="home-content">
        <h1>Hey! I'm <span>Mert Araz</span></h1>
        <div class="text-animate">
            <h3>Frontend Developer</h3>
        </div>
        <p>Tutkulu, yaratıcı ve kullanıcı odaklı çözümler sunmak için buradayım. 
            Web projelerinde estetik tasarımlar ve sürükleyici kullanıcı deneyimleri oluşturmayı hedefliyorum. 
            İşinizi dijital dünyada öne çıkarmak için size özgün ve etkileyici web çözümleri sunabilirim.</p>
           
        <div class="btn-box">
            <a href="https://www.dostpen.com/wp-content/uploads/2023/07/Mert_Araz_CV.pdf" target="_blank" class="btn">CV İndir <i class='bx bx-down-arrow-alt'></i></a>
            <a href="https://github.com/measses?tab=repositories" target="_blank" class="btn">Projelerim  <i class='bx bx-briefcase'></i></a>
        </div>    
    </div>
    <div class="home-sci">
        <a href="mailto:mertaraz7@gmail.com" target="_blank"><i class='bx bxl-gmail'></i></a>
        <a href="https://github.com/measses" target="_blank"><i class='bx bxl-github'></i></a>
        <a href="https://www.linkedin.com/in/muhammedmertaraz/" target="_blank"><i class='bx bxl-linkedin'></i></a>
        <a href="https://twitter.com/measssess" target="_blank"><i class='bx bxl-twitter'></i></a>
    </div>  
    <div class="home-imgHover">
    </div>
</section>

CSS代码 #

.home-sci a:hover{
    color: var(--bg-color);
}

.home-sci a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background:var(--main-color);
    z-index: -1;
    transition: .5s;
}

/* 原错误媒体查询 */
@media screen and(max-width: 430px){
    .home-sci a{
        margin-top:20px;
    }
}

可能原因 #

1. 媒体查询语法错误：原代码中and(max-width: 430px)缺少空格，Safari无法正确识别该规则
2. 绝对定位伪元素的父容器未设置相对定位：home-sci a未设置position: relative，导致伪元素定位脱离预期容器
3. Safari对CSS过渡、变量的解析与Chrome存在差异，引发布局或样式异常

解决方案 #

1. 修复媒体查询语法 #

将媒体查询的错误语法修正，添加and与括号间的空格：

@media screen and (max-width: 430px) {
    .home-sci a{
        margin-top:20px;
    }
}

2. 为父元素设置相对定位 #

为home-sci a添加相对定位，确保伪元素以当前a标签为基准定位：

.home-sci a {
    position: relative;
    display: inline-block; /* 确保元素尺寸可控 */
    width: 40px; /* 根据实际布局调整 */
    height: 40px; /* 根据实际布局调整 */
    text-align: center;
    line-height: 40px; /* 图标垂直居中 */
}

3. 兼容Safari的过渡动画 #

为过渡属性添加webkit前缀，确保Safari正常识别动画效果：

.home-sci a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--main-color);
    z-index: -1;
    -webkit-transition: width .5s;
    transition: width .5s;
}

4. 为CSS变量添加降级方案 #

针对Safari可能存在的CSS变量兼容性问题，添加默认颜色值作为降级：

.home-sci a:hover{
    color: var(--bg-color, #ffffff); /* 替换为你的背景色默认值 */
}

.home-sci a::before{
    background: var(--main-color, #00abf0); /* 替换为主色调默认值 */
}

5. 添加Safari专属样式调整 #

如果以上方法仍未解决问题，可针对Safari编写专属样式：

/* 仅针对Safari生效 */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .home-sci a {
            /* 根据实际变形情况微调样式，比如margin、尺寸等 */
            margin-top: 18px;
        }
    }
}

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