开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

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

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

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

需要注意的是，以上方法只是针对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

相关搜索:为什么我的CSS动画可以在除Safari之外的所有浏览器中运行？在Angular中使用css在Safari中动画“transform:scale()”时出现不必要的延迟 w3-CSS在使用inline-flex的div中，当内容宽度大于视口宽度时附加换行符 css悬停动画在ie11中不起作用。在IE中悬停在无法工作的元素上时的CSS转换 c语言实部虚部 c语言文字连接 c语言三次握手 c语言什么意思磁盘调度c语言 c语言tm类型

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Google IO 2023 — Web 平台的最新动态

是否知道你有更简单的方式来控制 CSS 变换呢，或者是否知道现在有新的视口单位可以适应移动用户界面？...你可能熟悉像下面这样写 CSS 变换的方式。 img 现在，通过单独的变换属性，我们可以分别指定变换的属性。 img 当我们编写复杂的关键帧动画时，这是非常方便的。...比如现在我们准备从零到百分之百平移元素，并在不同的关键帧点上旋转元素，在中间位置缩放元素。 img 在以前，我们必须手动计算所有三个属性在不同关键帧点上的值，才能编写如下所示的代码。...img 新的 CSS 视口单位新添加的视口单位对于移动网站非常重要，因为移动视口的大小可能受动态工具栏的存在或缺失的影响。有时候你会看到 URL 搜索条和导航工具栏，但有时它们完全消失了。...img 像 Small Viewport 和 Large viewport 高度这样的新视口单位给 Web 开发者提供了最终的控制权，以便在设计移动网站时更好地适应视口大小。

2012 0

我至今没想到，我也能在 CSS 中实现 SVG 动画了

本篇文章我们就来一起学习学习如何在 CSS 中实现 SVG 动画。开篇：CSS 与 SVG 相关核心概念在实践动画之前，你需要了解 svg 的内部工作原理。...同时该区域将根据元素的宽度和高度属性进行缩放，以适应视口的边界。不过，视口 viewport 的宽度和高度属性的比例可能确实不同于 viewBox 属性的宽度和高度部分的比例。...我们可以延长动画的持续时间，但不能添加不同的关键帧。于是，这就催生了一个更强大的概念: CSS animation。使用 CSS animation，我们可以有多个关键帧和一个无限循环。...关键帧的时间是用相对单位(百分比)来定义的。每个关键帧描述一个或多个 CSS 属性在那个时间点的值。CSS animation 将确保关键帧之间的平滑过渡。...不过，在矢量图像编辑软件中创建的 SVG 图标不太可能使用相对单位。无论包含图标的SVG 元素的宽高比如何，我们都希望确保图标的宽高比得到维护。

1.1K1 0

【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

维基百科①的解释为：在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...因为，浏览器窗口中所浏览图像的放大，是依赖于视口的缩小来实现的。如果不好理解，可以参照下图动画来感受一下。（上面蓝框表示底层画布、红框表示视口，下面表示用户在浏览器窗口中看到的页面） ?...如前面 viewport 概念的解释，css 中同样 px 大小的宽高描述，在不同大小的视口状态下，用户在浏览器窗口中看到的页面大小的效果是不同的。...我们做的 ui 稿中的 px 到 css 的 rem、vw 这些单位的转换，核心目的就是在不同的屏幕上高保真还原设计稿。...●视口表示当前正在查看的计算机图形中的多边形（通常为矩形）区域。 ●在 Web 浏览器术语中，它指的是您正在查看的文档中当前可在其窗口中显示的部分（如果以全屏模式查看文档，则指的是屏幕）。

3K3 0

响应式web设计转

em或百分比视口调试工具 Microsoft Iternet Explorer Developer Toolbar ，Safari RaiseMe，Resizer，Firefox Firesizer...: width 视口宽度 height 视口高度 device-width 设备屏幕的宽度 device-height 设备屏幕的高度 orientation 横向还是纵向状态... aspect-ratio 视口的宽高比，如16/9 device-aspect-ratio 屏幕的宽高比 color 每种颜色的位数，如16 color-index 设备颜色索引表中的颜色数...; 百分比计算公式也适用于将文字的像素单位转换为相对单位em。 ...，使用降级方案，设置z-index值 css3动画效果由两部份组成:@keyframes 关键帧声明和该关键帧的使用声明部分: @keyframes warning {

3.6K1 0

彻底搞懂移动Web开发中的viewport与跨屏适配

维基百科①的解释为：在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...因为，浏览器窗口中所浏览图像的放大，是依赖于视口的缩小来实现的。如果不好理解，可以参照下图动画来感受一下。（上面蓝框表示底层画布、红框表示视口，下面表示用户在浏览器窗口中看到的页面） ?...如前面 viewport 概念的解释，css 中同样 px 大小的宽高描述，在不同大小的视口状态下，用户在浏览器窗口中看到的页面大小的效果是不同的。...我们做的 ui 稿中的 px 到 css 的 rem、vw 这些单位的转换，核心目的就是在不同的屏幕上高保真还原设计稿。...●视口表示当前正在查看的计算机图形中的多边形（通常为矩形）区域。 ●在 Web 浏览器术语中，它指的是您正在查看的文档中当前可在其窗口中显示的部分（如果以全屏模式查看文档，则指的是屏幕）。

3.4K2 0

微信小程序布局单位的使用

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。...，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。...什么是视口（视窗）在桌面端，视口在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport...视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 vw：viewpoint width，视口宽度，1vw等于视窗宽度的1%。...vh：viewpoint height，视口高度，1vh等于视窗高度的1%。 vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

3K6 1

CSS 尺寸单位概述

在继续之前，先明确下后面频繁提到的有关概念：指定值、计算值和使用值。「指定值」是文档样式表中显示的 CSS 属性的值。「计算值」是浏览器应用级联规则、继承规则和属性定义后的属性值。...「使用值」是浏览器进行最终调整和转换后的属性值。在此过程中，相对单位会转换为绝对单位。对于有屏幕的媒体（即有屏幕的设备），物理单位会转换为等效的像素单位。...但在屏幕上，2in 的计算值为 192px。绝对单位不受字体规格、继承属性值或视口的影响。在了解输出介质的物理特性时，使用绝对单位效果最佳。避免在font-size属性中使用绝对值。...在 *vmin 单位的情况下，长度按 *vw 或 *vh 中较小者的比例计算。...容器相对单位目前是在 CSS Containment Module Level 3[1]中定义的，而不是在CSS Values and Units Module Level 4[2]规范中。

3431 0

轮播图效果，不再局限于JS制作！

主要涉及到的知识点相比较来说，使用CSS3实现轮播图效果会比使用JS来的简单一些，只需要借助CSS3系列中的选择器、动画，再配合上相应的位置定位即可实现，下面来具体分析下需要用到的知识点。...2.3 CSS3动画借助CSS3的animation来实现图片的轮播变化效果，配合上关键帧keyframe，让不同的变化时期发生图片位置的变化。...基本实现思路利用外层div仅仅是一张图片的大小，内层div包含若干张图片的方式，借助超出隐藏实现图片的排列，让视口div永远只有一张图片被展示；之后借助CSS3的动画，使用关键帧控制，变化图片的定位位置值...，调整较佳的视觉效果，最终实现出纯CSS3制作的轮播图效果。...-- 效果的视口区 --> <!

5K6 0

什么是移动端开发【重点学习系列—干货十足–一万字详解】

CSS 像素不能直接跟现实中的长度单位换算 CSS 像素主要用在 CSS 与 JS 中控制元素的大小位图像素位图像素也是一个长度单位。...== 位图像素在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素等于 N 个物理像素像素密度屏幕上每英寸可以显示的像素点的数量，单位是 ppi...在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源。...rem适配 em 和 rem em 和 rem 都是 CSS 中的长度单位。...例如底部边框在高清屏幕下设置方法二 rem 页面布局元素的边框设置为 1px 通过 viewport 中的 initial-scale 将页面整体缩小重新设置根元素字体 7-

2.5K2 1

Google IO 2023 — 前端开发者划重点

包括：CSS 变换、新的 CSS 视口单位、原生深拷贝、focus-visible 伪类、Transform Stream、Import Maps 这几项功能。...因为一个这样的倡议，下面一些功能在所有浏览器中都得了兼容：dialog 元素、内置拥有无障碍特性的模态和非模态对话框、新的兼容移动端 UI 的视口单位、CSS 级联层等等，这解决了开发者挣扎了多年的难题...是否知道你有更简单的方式来控制 CSS 变换呢，或者是否知道现在有新的视口单位可以适应移动用户界面？...新的 CSS 视口单位新添加的视口单位对于移动网站非常重要，因为移动视口的大小可能受动态工具栏的存在或缺失的影响。有时候你会看到 URL 搜索条和导航工具栏，但有时它们完全消失了。...像 Small Viewport 和 Large viewport 高度这样的新视口单位给 Web 开发者提供了最终的控制权，以便在设计移动网站时更好地适应视口大小。

5093 0

【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )

一、CSS3 动画属性 1、CSS3 常见动画属性简介 CSS3 中动画使用 @keyframes 关键字定义动画 ; @keyframes element-move { 0% { transform...: translateX(500px); } 100% { transform: translateX(0); } } 在 @keyframes 定义的动画中 , 可以设置一系列的 CSS...属性 , 用于控制动画的运行 , 常见的属性如下 : ( 下面的动画属性是设置在执行动画的标签元素样式中的 ) animation-name 属性 : 设置在 @keyframes 定义动画时的...动画名称 , 一般在调用动画的标签元素中使用 , 用于定义动画执行哪些关键帧 , 该属性是调用动画必须要设置的 ; div { /* 设置动画名称之前使用...属性 : 设置 CSS3 动画的持续时间 , 默认为 0 ; 单位可以是秒 s ; 单位也可以是毫秒 ms ; div { /* 设置动画执行时间

2773 0

长度单位、calc() 表达式

长度单位绝对长度单位绝对长度单位代表一个物理测量 // 像素px（pixels）：在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。...实际情况是与浏览器使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位 em em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的...当无法确定数字0宽度时，取em值的一半作为ch值兼容性：IE8-不支持 ch在实际中主要用于盲文排版视口相关相对长度单位视口相关的长度值相对于初始包含块的大小。...1/100 vw 布局视口宽度的 1/100 vmin 布局视口高度和宽度之间的最小值的 1/100 vmax 布局视口高度和宽度之间的最大值的 1/100 calc() 数学表达式（calculation...）数学表达式calc()是CSS中的函数，主要用于数学运算。

8091 0

试试动态视口单位之 dvh、svh、lvh

大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。...根因在于：很多浏览器，在计算 100vh 的高度的时候，会把地址栏等相关控件的高度计算在内2 同时，很多时候，由于会弹出软键盘等操作，在弹出的过程中，100vh 的计算值并不会实时发生变化！...dvh、svh、lvh 它们的兼容性（2023-01-25）截止到书写本文的时间，它们已经被 Chrome 108+ 支持，而 firefox、Safari 在更早的阶段，就已经开始支持这些新单位了。...CSS 的更新迭代一直在快速持续，很多内容还是有必要不断了解学习，在不久的将来就能很快应用在业务中。...也就是说，CSS 除了在视口这条路之外，也逐渐在扩充探索以及完善与容器大小变化相关的能力。

1.9K2 0

07-移动端开发教程-移动端视口

在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。...如果我故意设置操作系统分辨率为512*384（水平和垂直各缩小1倍），那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍，所以CSS中的像素只是相对，不是绝对的。...在移动Web开发中就是指的CSS的逻辑像素。...(ideal viewport) 所谓的理想视口是：第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清...默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。

1.5K8 0

07-移动端开发教程-移动端视口

在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。...如果我故意设置操作系统分辨率为512*384（水平和垂直各缩小1倍），那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍，所以CSS中的像素只是相对，不是绝对的。...在移动Web开发中就是指的CSS的逻辑像素。...(ideal viewport) 所谓的理想视口是：第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清...默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。

1.9K12 0

css学习笔记，持续记录。

initial-scale属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。理想视口：文档宽度和屏幕宽度一致。...理想视口宽度 = 移动设备横向分辨率 / DPR 视觉视口 visual viewport：如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小...，此时视觉视口也变小了。 ...视觉视口的宽度 = 理想视口宽度 / 缩放比例参考链接：https://blog.csdn.net/leman314/article/details/111936863 13. px px的大小在不同屏幕上是一样的...35. fixed fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

2.7K6 0

WWDC 2022：哪些是前端开发者要关注的信息？

容器查询在响应式布局布局中，经常使用媒体查询（Media Queries）检测视窗的宽高，实现自元素样式的自动调整。但是在一些页面设计中，元素的容器尺寸发生变化时，元素的样式也需要随之变化。...很显然，媒体查询无法支持这种场景。 CSS 容器查询就是来解决这个问题的，它一直是 Web 开发者梦寐以求的功能，简单来说: 容器查询允许开发者根据容器元素的大小来设置元素的样式。...它类似于 @media 查询，不同之处在于它根据容器的大小而不是视口的大小进行判断。...可访问性改进 Safari 16 重新构建了 WebKit 在 macOS 上的可访问性支持，提高了性能和响应能力。...动画改进 CSS Offset Path 为 Web 开发者提供了一种沿任意形状的自定义路径设置动画的方法。offset-path 属性可让你定义要沿其设置动画的几何路径。

1.8K1 0

将 SVG 与媒体查询结合使用

在 HTML 文档中，我们可以根据视口的条件显示、隐藏或重新排列页面的某些部分。例如，如果浏览器窗口的宽度为 480 像素，我们可能会将导航从水平导航移动到垂直可折叠列表。...单位对于 SVG 属性是可选的。另一方面，CSS 值需要单位。长度和百分比对于此处提到的属性都有效，但请注意，长度在 SVG 文档中的作用略有不同。请记住，SVG 中的 S 代表可扩展。...将 SVG 与媒体查询结合使用对于 HTML 文档，我们可能会根据视口的条件显示、隐藏或重新排列页面的某些部分。...但是通过媒体查询，我们可以做更聪明的事情。让我们区分 HTML 文档视口和 SVG 文档视口。当 SVG 内联时，HTML 视口和 SVG 视口是一回事。...我们的元素fill在特定视口宽度处获得新颜色。当视口为 20 像素宽时，该fill值为蓝绿色。当它是 300 像素宽时，它是黄色的。

6.2K0 0

移动端viewport属性说明笔记

说说移动端浏览器中的视口视口(Viewport)是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。...通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念像素是计算机屏幕中显示特定颜色的最小区域。...CSS 布局将会根据它来进行计算，并被它约束。...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值，即当页面第一次 load 的时候缩放比例...= no，也可以在 Android Chrome 浏览器中强制启用手动缩放 iOS的Safari浏览器，从10.0版本开始将不在支持user-scalable=no，所以即使设置了user-scalable

1.5K2 0

理解CSS | 青训营笔记

2.CSS 中的动画属性 animation-name：设置需要绑定到元素的动画名称； animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0； animation-timing-function...（开始播放之前或播放结束之后）动画的状态（样式），属性的可选值如下：值描述 none 不改变动画的默认行为 forwards 当动画播放完成后，保持动画最后一个关键帧中的样式 backwards 在...5.3 设备像素,参考像素移动设备视口 5.3.1 设备像素 5.3.2 DPI && PPI 5.4 css3 像素 5.5 css常用单位当开发网页时，CSS单位是一项非常重要的知识。...vw/vh 视口宽度单位（Viewport Width / Viewport Height），视口指窗口显示内容区域的大小。vw表示视口宽度的1/100，vh表示视口高度的1/100。...这些插件可以改变CSS规则或者生成新的CSS规则。将处理完毕的CSS代码重新生成成普通的CSS文件，可以是通过压缩、格式化等方式。

991 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭