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

业务场景:

让元素有背景图.

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

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

元素要有圆角.

通过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的时候计算可能就会出现问题.解决办法是:

<svgxmlns="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的效果

但是这之后还是有一个问题:safari浏览器会有问题,svg的定位错误.  哈哈哈哈哈

总结:

并不是什么技术方案,只是个思路,经验代替不了思考.

具体原因不清楚,可能是浏览器问题以后会解决吧.只要解决问题就好.

用background clip可以解决?,我没有弄,当需要更多效果或者验收不过的时候可以考虑.

最后,没有完美解决,或许我该试试用4个svg分别做四个角,而不是用上下两个?