Safari 14下screenfull无法扩展视频，react-player自定义播放器全屏异常

基于react-player开发的自定义视频播放器，在Safari 14浏览器中进入全屏模式后，出现播放控件错位、视频未放大的问题，对应现象截图如下：

可能的原因如下：

• 全屏挂载元素选择错误：Safari 14对非<video>原生元素的全屏API适配存在缺陷，若调用requestFullscreen时绑定的是react-player的外层容器而非内部原生video元素，会出现仅容器拉伸为全屏、video本身未触发Safari的全屏适配逻辑、尺寸保持原有大小的问题，同时自定义控件的层叠上下文会被容器打乱出现错位。
• 缺少webkit前缀的CSS适配：Safari 14不识别标准:fullscreen伪类，仅支持私有前缀的:-webkit-full-screen伪类。若仅写了标准全屏状态下的视频拉伸、控件定位样式，未加webkit前缀的适配规则，对应的样式在Safari全屏模式下完全不生效，会直接导致视频无放大、控件错位。
• react-player配置项不符合Safari要求：未配置playsinline属性会导致Safari 14触发全屏时优先走系统原生视频全屏逻辑，自定义的DOM控件无法和原生全屏层适配，同时视频会脱离自定义容器的尺寸约束；若关闭了webkitFullscreen适配开关，也会导致react-player内部未做Safari内核的全屏兼容处理。
• 自定义控件定位规则不符合Safari全屏逻辑：若播放控件使用position: fixed定位，Safari 14下进入全屏的容器会生成新的根层叠上下文，fixed定位的元素会相对于当前全屏容器而非浏览器视口定位，若未单独适配全屏状态下的控件定位规则，就会出现位置错位。
• 全屏切换后未触发重绘：Safari 14在全屏切换完成后不会自动触发容器DOM的重排重绘，若react-player外层容器原有固定宽高约束，进入全屏后宽高变更未被video元素监听到，就会保持原有尺寸不会放大。

内容的提问来源于stack exchange，提问作者Oleksandr Fomin