Safari浏览器兼容性问题

1.Safari下父元素设置flex后，子元素img设置width后，高度异常。

<style>
 div {
    display: flex;
    width: 600px;
  }
  img {
    width: 100%;
  }
</style>
<div>
  <img
    src="https://img-blog.csdnimg.cn/cover1/248667912046641316.jpg"
    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")

更多可参考
https://juejin.cn/post/6844903885505576968

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。

解决方案：

1. c也开启弹性布局并设置flex:1
2. 运用定位方法，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:高度恢复正常。