在Safari中无法重新计算CSS动画的最终关键帧中的视口单位

是由于Safari浏览器在处理视口单位（如vw、vh、vmin、vmax）时存在一个已知的bug。这个bug导致Safari无法正确地重新计算CSS动画中使用视口单位的最终关键帧。

视口单位是相对于浏览器窗口大小而定的单位，它们可以根据窗口大小的变化而自动调整。然而，在Safari中，当使用视口单位作为CSS动画的关键帧时，动画在窗口大小变化后无法正确地重新计算最终关键帧的值，导致动画效果出现问题。

为了解决这个问题，可以考虑以下几种方法：

1. 使用JavaScript进行动态计算：通过JavaScript监听窗口大小的变化，然后动态计算并更新CSS动画中使用视口单位的值。这样可以在窗口大小变化时重新计算最终关键帧的值，从而保持动画效果的正确性。
2. 使用媒体查询：通过媒体查询在不同的窗口大小下应用不同的CSS样式，避免使用视口单位的动画效果。可以根据窗口大小设置不同的CSS类，然后在关键帧中使用这些类来实现动画效果。
3. 使用其他单位替代：如果可能的话，可以考虑使用其他单位替代视口单位来实现相似的动画效果。例如，使用百分比单位或像素单位来代替视口单位。

需要注意的是，以上方法只是针对Safari浏览器中无法重新计算CSS动画的最终关键帧中的视口单位的问题提供了一些解决思路，并不能保证适用于所有情况。具体的解决方法需要根据实际情况进行调整和实施。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云计算产品：https://cloud.tencent.com/product
• 前端开发相关产品：https://cloud.tencent.com/product/fe
• 后端开发相关产品：https://cloud.tencent.com/product/be
• 软件测试相关产品：https://cloud.tencent.com/product/st
• 数据库相关产品：https://cloud.tencent.com/product/db
• 服务器运维相关产品：https://cloud.tencent.com/product/cm
• 云原生相关产品：https://cloud.tencent.com/product/tke
• 网络通信相关产品：https://cloud.tencent.com/product/cc
• 网络安全相关产品：https://cloud.tencent.com/product/saf
• 音视频相关产品：https://cloud.tencent.com/product/vod
• 多媒体处理相关产品：https://cloud.tencent.com/product/mp
• 人工智能相关产品：https://cloud.tencent.com/product/ai
• 物联网相关产品：https://cloud.tencent.com/product/iot
• 移动开发相关产品：https://cloud.tencent.com/product/mob
• 存储相关产品：https://cloud.tencent.com/product/cos
• 区块链相关产品：https://cloud.tencent.com/product/bc
• 元宇宙相关产品：https://cloud.tencent.com/product/mu