1.Safari下父元素设置flex后,子元素img设置width后,高度异常。
<style>
div {
display: flex;
width: 600px;
}
img {
width: 100%;
}
</style>
<div>
<img
alt=""
/>
</div>
点击到codesandboxio查看效果及解决方案(chrome下正常,safari下高度异常)
2. Safari,Iphone,Mac下播放部分mp4文件失败(如mpeg4格式),安卓机下均正常
Safari下对mp4播放文件压缩转码格式有要求,需要将视频重新进行转码压缩后才可播放。
3. safari浏览器下,Date格式化问题
Safari浏览器下Date格式化时需要将年月入中的 - 格式转化为 / ,否则会出现很多问题:
// safari下:
new Date("2021-3-1") // Invalid Date
new Date("2021-03-01 00:00:00") // Invalid Date
new Date("2021-03-01") // Mon Mar 01 2021 08:00:00 GMT+0800 (CST)
// 注意看,上一个虽然时间转换成功,但是时间为08:00,至于为什么是8,应该是因为时区问题
所以在使用到Date时,尽量将时间转换为 / 格式,会避免掉很多问题。
至于时区问题,可以如此处理:
// 中国标准时间
new Date("2021/03/01 00:00:00+08:00")
4.safari浏览器下,后端请求开启http2导致接口请求失败
接口会直接挂掉(未走到服务器),且会看到抛出如下错误:
Failed to load resource: 未能完成该操作。协议错误
查了资料后,发现是因为http2的原因。需要后端对接口做修改,禁止http2.0。
另外,MAC本地调试情况下,可以进入Safari开发者模式后,勾选禁用跨域限制选项,也可以在本地情况下正常请求接口(但是不能指望用户这样处理吧,所以还是需要后端同学处理 (:з」∠))
5.safari下,flex布局下子元素height:100%无效
如:
<box>
<div>
<a />
<b />
<c >
<d />
</c>
</div>
</box>
// box高度设置为100vh,div开启弹性布局,高度100%,同时设置flex-direction: column;flex: 1;子元素ab设置flex-grow: 0;c设置flex-grow:1;d设置height:100%;
// chrome下d会充满c的高度,但是safari下d并不会充满c。
解决方案:
- c也开启弹性布局并设置flex:1
- 运用定位方法,c相对定位,d设置绝对定位同时left,top,right,bottom均为0
ps:另外还碰到个问题,不知是否也是flex的兼容性问题,还是因为我这边更外层box使用了display:table-cell;vertical-align:middle;的兼容性问题,问题如下:
div添加padding-top:100px后,会导致外层box也出现莫名的上下padding,各为50px。导致div的高度少了100px(因为外层box出现了上下各50px的padding,暂无头绪 = = )。
解决方案:
把div的padding-top删除,改为a添加margin-top:高度恢复正常。