不完美解决谷歌Chrome在设置background cover和fixed属性后,滚动屏幕出现背景图片的拉伸

news2024/11/16 7:38:20

业务场景:

让元素有背景图.

背景图不随着页面滚动而移动,相对于浏览器窗口固定.

根据屏幕尺寸,背景图自动覆盖式填充,不能有接缝和重复.

元素要有圆角.

通过js入参动态设置背景图.

不便截图,相信各位上面可以看明白了.

复现:

css是这样的

.main {
    width: 90%;
    background-size: 100% 100%;
    border-radius: 3.125rem;
    padding: 5% 5% 20rem;
}

js中动态设置了背景图片

let mainStyleOverride = {
        background: `fixed url(${props.backgroundImageUrl.toString().startsWith("http") ? props.backgroundImageUrl : backImg}) `,
        backgroundSize: 'cover',
        //网上有人说这么做,但是不满足需求,这样设置以后,鼠标滚动背景图就跟着走了
        //transform: "translate3d(0, 0, 0)",
    }

return <div className="main" style={mainStyleOverride}>
        <div className="main-title">{props.title}</div>
        <div className="main-subTitle">{props.subTitle}</div>
    </div>

开始以为是rem的问题,同事说是这个可能是元素的高度变化了才导致的.但并不是.元素高度没有变化.

这个问题在safari上不存在.

解决方法:

方法1:

.main {
    width: 90%;
    //background-size: 100% 100%;
    //问题的根源
    //border-radius: 3.125rem;
    padding: 5% 5% 20rem;
    //增加后没有问题,找到灵感
    //background-position: 10rem 0;
    background-size: cover;
    //只有谷歌浏览器会出这个问题
    //-webkit-background-size: cover;
    //-moz-background-size: cover;
    //-o-background-size: cover;
    //为cover层提供定位
    position: relative;
    //将多余的box-shadow隐藏,否则如果调整时失误将box-shadow的第四参数调整过大会侵蚀别的元素
    overflow: hidden;
    //增加一个遮罩层,让中间镂空,周围圆角,圆角外部是白色的box shadow
    &-cover{
        //满铺
        width: 100%;
        height: 100%;
        position: absolute;
        //调整位置
        top: 0;
        left: 0;
        //圆角放在遮罩层
        border-radius: 3.125rem;
        //透明,就展示中间原来展示的内容了.
        background: transparent;
        //第四个参数要大于等于border-radius.否则圆角切不完,外面还剩一块,第三个参数要小,否则会出现渐变
        box-shadow: 0 0 1px 3.125rem white;
    }
}

export const AD = (props) => {
    let editing = props.editing;
    let mainStyleOverride = {
        backgroundImage: `url(${props.backgroundImageUrl.toString().startsWith("http") ? props.backgroundImageUrl : backImg})`,
        backgroundAttachment:'fixed',
    }
    const onClick = () => {
        window.location.href = props.buttonHrefUrl;
    }
    return <div className="main" style={mainStyleOverride}>
        <div className="main-cover"></div>
        <div className="main-title">{props.title}</div>
        <div className="main-subTitle">{props.subTitle}</div>
    </div>
};

但是这个方法会有一个问题:中间的内容会被cover掉

方法2:

四个角分别用四个矩形做圆角box-shadow,这样做的问题也有一个,谷歌浏览器会在渲染box-shadow时,外部的container边界上会映射出box-shadow的影子.

方法3:

main外面再包一层,圆角设置到外面

advertise {
  overflow: hidden;
  border-radius: 3.125rem;
  width: 100%;

  &-main {
    width: 100%;
    box-sizing: border-box;
    padding: 5% 5% 20rem;
    background-size: cover;
    position: relative;
}

这个方法也有一个问题:

safari不显示圆角,手机chrome和safari也不显示圆角.

方法4:

使用svg,也有问题某个宽度/角度的时候也会出现边缘.应该是浏览器计算精度问题了.

这个问题在左上角0,0的位置不会出现,坐标非0的时候计算可能就会出现问题.解决办法是:

<svg
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            viewBox="0 0 1000 50"
            style={{
                background:'transparent',
                position:'absolute',
                top:0,
                left:0,
            }}
        >
            <path d="M 0,50 A 50,50 0 0 1 50,0 L 0,0 M0,50 Z" fill="white"></path>
            <path d="M 950,0 A 50,50 0 0 1 1001,50 L 1001,0 Z" fill="white"></path>
        </svg>

注意1001的写法实际你的视口是1000的,但是要写成大于1000 防止计算的时候丢精度导致的问题.但是不要写的太大.比如你写成1010,那么可能就发生形变了.

比如像下面这样就是写成1010的效果