webkit 相关问题

WebKit是一个开源的Web内容引擎，适用于浏览器和其他应用程序，如Apple Safari，Mail，App Store和一些移动浏览器，包括Android，iOS，RIM Blackberry，Symbian和WebOS的预安装浏览器。

-webkit-filter 的色调旋转似乎无法在 chrome 中产生正确的结果

如果我使用以下方法将色调旋转 90 度： .foo{ -webkit-filter：色调旋转（90deg）； } 它确实旋转了色调，但看起来不正确。例如，如果我在

google-chrome css filter webkit hue

回答 3 投票 0

验证 iOS 16 和 iOS 17 版本的 WebKit 版本并评估提交影响

我注意到，与 iOS 16 相比，使用 Xcode 15 为 iOS 17 构建时 WKWebView 中的某些行为有所不同。我怀疑这种差异可能归因于删除 iOS 的提交...

ios webkit xcode15 ios17

回答 1 投票 0

WebKit：带有 css 缩放 + translate3d 的模糊文本

我发现 Chrome 和其他 WebKit 浏览器会严重模糊任何也应用了 translate3d 的 css 缩放内容。这是一个 JS 小提琴：http://jsfiddle.net/5f6Wg/。（在 Chrome 中查看....

css webkit scale blurry translate3d

回答 9 投票 0

反射元素上的框阴影

将鼠标悬停在某个元素上时，box-shadow 属性会正确应用于主元素（顶部的元素）。然而，反射的元素最终会出现一个不美观的方形边框，因为它

html css webkit

回答 1 投票 0

为什么我在使用 Weston/Wayland 时会收到“权限被拒绝”错误

我用Buildroot（2021.05）构建了一个Linux系统，可以在树莓派4上运行。我的图形堆栈包括使用 mesa（vc4、v3d、kmro）、带有 DRM 后端的 Wayland / Weston。还安装了kmscube，...

webkit raspberry-pi4 wayland mesa weston

回答 1 投票 0

iOS 18.2 Beta 中 Ext JS 4.0 和 Sencha Touch 2.0 的兼容性问题 – 旧版 JavaScript 支持和渲染问题

升级到 iOS 18.2 Beta 后，我遇到了与旧版 JavaScript 框架（特别是 Ext JS 4.0 和 Sencha Touch 2.0）的兼容性问题。我的应用程序在项目上运行良好...

ios extjs webkit sencha-touch-2 ios18

回答 1 投票 0

如何在JavaFX WebView / WebKit中显示双线和alpha颜色的边框？

我需要在 WebView 中使用双线和 alpha 颜色的边框。这是我的代码：公共类 WebViewTest 扩展应用程序 { @覆盖公共无效开始（阶段primaryStage）{ 网页视图

java css javafx webkit

回答 1 投票 0

HTML5 搜索输入：Chrome 中没有背景图片？

我一直在绞尽脑汁地试图让 Chrome 用背景图像来设计我的搜索输入。 Firefox 没有问题，但我担心这是因为它将输入视为常规文本输入。我...

css html google-chrome webkit

回答 4 投票 0

为什么“transform:scale()”上的转换会使元素在 webkit 浏览器中变得像素化？

如果我使用 CSS scale() 缩放元素，它会在转换时变得像素化。但转换完成后又恢复正常（参见截图1）。然而它只发生在网络中......

css google-chrome webkit css-transitions

回答 4 投票 0

Safari 中 Webkit 框架时间线中的灰色条是什么？

我遇到了性能问题，仅在 Safari 中的动画期间帧速率大幅下降，但我无法识别问题并查看帧时间线。问题是

animation safari webkit frame-rate safari-web-inspector

回答 1 投票 0

如何创建格式化的 javascript 控制台日志消息

今天我在 Facebook 上的 Chrome 控制台上“摇摇晃晃”。令人惊讶的是我在控制台中收到了这条消息。现在我的问题是：这怎么可能？我知道有一些“利用”方法......

javascript html google-chrome webkit exploit

回答 6 投票 0

-webkit-transform-style：preserve-3d 不起作用

我正在尝试在此链接 code_on_jsfiddle 上使用效果。效果是显示硬币旋转时的厚度。代码似乎在 jsfiddle 上运行良好，但是当我尝试在我的

css webkit

回答 4 投票 0

如何将已安装的 PWA 的窗口高度设置为 35px？

对于已安装的 PWA，我无法将窗口的高度（使用 window.resizeTo）设置为 35px。看起来最小高度是 108px。标题栏是 35px，所以 108px 对我来说似乎很奇怪。我是

javascript webkit progressive-web-apps

回答 1 投票 0

Shopify 自定义动画 css 仅适用于 ios 设备，但适用于网络和 Android 设备

Shopify 自定义动画 css 仅适用于 ios 设备，但适用于网络和 Android 设备。我的 Shopify 代码： {{“MyLandAnimation.css”|资产网址 |样式表标签}} Shopify 自定义动画 css 仅适用于 ios 设备，但适用于网络和 Android 设备。我的 Shopify 代码： {{ "MyLandAnimation.css" | asset_url | stylesheet_tag }} <div class="myContainer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <g id="path-1"> <path d="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306z" class="hair hair-main"></path> </g> <g id="path-2"> <path d="M0 12s-12.8 3-13.9-12c0 0 14.2-1.8 13.9 12z" class="leaf-2" /> <path d="M0 12s-12.8 3-13.9-12c0 0 3.9 2.9 7 5.6a71.5 71.5 0 0 1 6.9 6.4z" class="leaf-1" /> </g> <g id="path-3"> <path d="M24 12s-5.3 9.3-14.8 1.5c0 0 6.8-9.4 14.8-1.5z" class="leaf-4" /> <path d="M24 12s-5.3 9.3-14.8 1.5c0 0 3.8-.7 7.2-1a57.3 57.3 0 0 1 7.6-.5z" class="leaf-3" /> </g> </defs> <use xlink:href="#path-1" x="0" y="0" /> <g transform="translate(300, 0) scale(-1, 1) translate(-300, 0)"> <use xlink:href="#path-1" x="0" y="0" /> </g> <g transform="translate(195, 233) scale(-1,1) translate(-195, -233)"> <g> <use href="#path-2" x="195" y="235" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="6,185, 233" dur=".75s" begin="anim1.end" /> </g> </g> <g transform="translate(195, 233) scale(-1,-1) translate(-195, -233)"> <g> <use href="#path-2" x="195" y="233" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="2,185, 233" dur=".75s" begin="anim1.end" /> </g> </g> <g> <use href="#path-2" x="410" y="235" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,400, 235" to="-12,400, 235" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 235" to="2,400, 235" dur=".75s" begin="anim1.end" /> </g> <g transform="translate(410, 233) scale(1,-1) translate(-410, -233)"> <g> <use href="#path-2" x="410" y="233" /> <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,400, 233" to="-12,400, 233" dur=".75s" begin="0s;anim2.end" /> <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 233" to="6,400, 233" dur=".75s" begin="anim1.end" /> </g> </g> <use xlink:href="#path-3" x="174" y="222" /> <use xlink:href="#path-3" x="398" y="222" /> <path class="text" fill-rule="evenodd" transform="translate(220, 215)" d="M 0 0.361 L 0 30.871 L 9.855 30.871 L 9.855 30.016 C 9.855 18.946 1.98 24.526 1.17 4.006 C 2.056 6.842 2.288 7.409 3.542 11.639 A 493.23 493.23 0 0 1 3.6 11.836 A 8.942 8.942 0 0 0 4.473 13.833 C 7.457 18.82 14.04 17.572 14.04 24.391 L 15.165 24.391 C 15.165 16.786 23.355 19.216 25.605 11.836 C 26.865 7.516 27.09 6.886 27.945 4.141 A 65.034 65.034 0 0 1 27.695 7.873 C 26.135 23.857 19.35 19.681 19.35 30.016 L 19.35 30.871 L 29.205 30.871 L 29.205 0.361 L 28.035 0.361 A 34.377 34.377 0 0 0 24.001 0.569 C 20.661 0.999 18.298 2.315 16.98 6.369 A 15.409 15.409 0 0 0 16.875 6.706 C 15.66 10.846 15.795 10.171 14.805 13.726 C 14.715 14.041 14.625 14.356 14.58 14.671 L 14.355 13.726 C 13.41 10.171 13.545 10.846 12.285 6.706 C 10.583 0.935 6.889 0.411 1.415 0.365 A 167.965 167.965 0 0 0 0 0.361 Z M 135.63 6.526 L 134.46 6.526 A 35.99 35.99 0 0 0 134.346 7.769 C 133.897 13.889 135.514 16.085 138.723 16.315 A 8.367 8.367 0 0 0 139.32 16.336 A 4.994 4.994 0 0 0 140.784 16.135 C 144.313 15.059 143.658 9.941 145.231 8.15 A 1.741 1.741 0 0 1 146.07 7.606 A 4.518 4.518 0 0 1 146.736 7.465 C 149.117 7.161 150.212 9.442 149.22 16.921 A 26.765 26.765 0 0 0 147.152 16.77 A 47.213 47.213 0 0 0 145.395 16.741 A 32.262 32.262 0 0 0 141.156 16.994 C 138.166 17.393 135.999 18.257 134.635 19.565 A 5.736 5.736 0 0 0 132.885 23.896 C 132.885 28.254 136.108 30.742 143.152 31.024 A 34.774 34.774 0 0 0 144.54 31.051 C 148.32 31.051 149.49 29.836 149.76 28.126 A 6.217 6.217 0 0 0 151.367 29.87 C 155.008 32.515 160.871 30.217 163.973 27.053 A 10.155 10.155 0 0 0 164.835 26.056 L 164.16 25.336 A 6.91 6.91 0 0 1 163.822 25.652 C 162.611 26.711 161.388 26.967 160.365 26.287 A 2.751 2.751 0 0 1 160.065 26.056 A 3.985 3.985 0 0 1 158.755 23.415 C 158.582 22.068 158.795 20.403 159.12 18.406 C 160.017 12.806 157.622 8.38 152.687 6.818 A 14.008 14.008 0 0 0 148.455 6.211 C 143.546 6.211 140.743 9.126 138.048 9.426 A 3.955 3.955 0 0 1 137.61 9.451 C 136.27 9.451 135.736 8.424 135.645 7 A 7.425 7.425 0 0 1 135.63 6.526 Z M 66.15 11.161 L 66.87 11.881 A 6.443 6.443 0 0 1 67.397 11.407 C 68.632 10.417 69.902 10.255 70.965 11.161 A 3.985 3.985 0 0 1 72.275 13.801 C 72.448 15.149 72.235 16.813 71.91 18.811 A 14.909 14.909 0 0 0 71.729 20.625 C 71.557 25.335 73.847 28.999 78.22 30.415 A 14.117 14.117 0 0 0 82.575 31.051 C 93.093 31.051 97.615 13.463 95.313 7.484 A 4.417 4.417 0 0 0 94.815 6.526 L 81.765 6.526 A 8.964 8.964 0 0 1 84.476 8.909 C 88.601 14.114 90.358 24.562 87.09 28.224 A 3.809 3.809 0 0 1 84.375 29.521 A 4.05 4.05 0 0 1 84.112 29.53 C 82.198 29.53 80.668 28.013 81.872 19.576 A 65.651 65.651 0 0 1 81.945 19.081 C 82.393 16.048 82.735 13.068 81.921 10.606 A 7.012 7.012 0 0 0 80.82 8.506 C 77.338 4.163 70.535 6.646 67.07 10.114 A 10.413 10.413 0 0 0 66.15 11.161 Z M 44.46 6.526 L 44.46 30.871 L 54.315 30.871 L 54.225 11.071 A 7.005 7.005 0 0 1 54.295 10.023 C 54.455 8.979 54.903 8.323 55.8 8.461 A 1.718 1.718 0 0 1 57.031 9.403 C 58.274 11.507 58.206 16.336 62.91 16.336 C 66.565 16.336 68.658 14.199 68.445 7.493 A 34.164 34.164 0 0 0 68.4 6.526 L 67.23 6.526 C 67.23 8.085 66.796 9.29 65.52 9.436 A 2.373 2.373 0 0 1 65.25 9.451 A 1.888 1.888 0 0 1 64.483 9.296 C 62.998 8.651 62.53 6.211 57.96 6.211 A 5.975 5.975 0 0 0 56.408 6.408 C 53.95 7.064 52.693 9.159 50.43 9.768 A 4.815 4.815 0 0 1 50.04 9.856 C 47.831 10.257 46.017 10.05 45.652 7.538 A 7.059 7.059 0 0 1 45.585 6.526 L 44.46 6.526 Z M 106.02 19.891 C 122.22 15.931 121.86 6.211 109.98 6.211 A 15.626 15.626 0 0 0 103.589 7.486 C 99.198 9.445 96.525 13.515 96.525 18.676 A 12.482 12.482 0 0 0 98.658 25.877 C 100.286 28.226 102.777 29.918 105.89 30.7 A 16.776 16.776 0 0 0 109.98 31.186 C 116.312 31.186 119.211 29.219 122.641 25.464 A 60.933 60.933 0 0 0 123.48 24.526 A 22.275 22.275 0 0 1 123.122 24.153 C 122.965 23.989 122.802 23.822 122.625 23.671 A 15.953 15.953 0 0 1 120.397 25.734 C 116.143 28.925 111.677 28.037 107.444 22.086 A 28.245 28.245 0 0 1 106.605 20.836 A 8.787 8.787 0 0 1 106.156 20.127 A 40.578 40.578 0 0 1 106.02 19.891 Z M 121.32 0.361 L 121.32 30.871 L 131.175 30.871 L 131.175 7.606 A 4.191 4.191 0 0 0 131.015 6.393 C 129.83 2.464 122.445 6.114 122.445 0.361 L 121.32 0.361 Z M 31.905 30.871 L 41.76 30.871 L 41.76 15.391 A 4.059 4.059 0 0 0 41.595 14.178 C 41.047 12.424 39.224 12.181 37.406 11.938 A 44.129 44.129 0 0 1 36.675 11.836 C 34.11 11.431 32.625 10.666 31.905 9.721 L 31.905 30.871 Z M 42.615 5.401 C 42.615 2.206 40.32 0.001 36.855 0.001 A 6.683 6.683 0 0 0 34.139 0.538 C 32.303 1.35 31.17 3.029 31.099 5.184 A 6.57 6.57 0 0 0 31.095 5.401 A 5.336 5.336 0 0 0 32.041 8.532 C 32.732 9.505 33.774 10.209 35.075 10.541 A 7.187 7.187 0 0 0 36.855 10.756 A 6.717 6.717 0 0 0 39.539 10.233 C 41.448 9.405 42.606 7.654 42.615 5.427 A 6.457 6.457 0 0 0 42.615 5.401 Z M 149.085 17.956 L 149.085 18.136 A 40.201 40.201 0 0 0 148.631 22.085 A 29.08 29.08 0 0 0 148.59 22.996 C 148.59 25.437 148.875 28.164 148.178 29.085 A 0.81 0.81 0 0 1 147.87 29.341 A 2.365 2.365 0 0 1 146.938 29.588 C 145.495 29.653 143.992 28.265 142.683 25.1 A 21.268 21.268 0 0 1 142.56 24.796 C 141.779 22.871 141.569 21.171 141.939 19.953 A 2.571 2.571 0 0 1 143.28 18.316 A 4.424 4.424 0 0 1 144.26 17.978 C 145.274 17.744 146.58 17.713 147.986 17.834 A 22.952 22.952 0 0 1 149.085 17.956 Z M 110.327 12.283 A 6.228 6.228 0 0 0 109.845 11.341 C 107.955 8.281 105.255 7.471 103.545 8.551 A 2.454 2.454 0 0 0 102.565 9.738 C 101.982 11.225 102.615 13.53 104.045 16.394 A 44.538 44.538 0 0 0 105.435 18.946 A 8.263 8.263 0 0 0 108.577 17.624 C 110.303 16.391 111.221 14.494 110.327 12.283 Z" /> <path d="M290.1 137.5s2.5 12.9-.5 22.4a1.7 1.7 0 0 0 .6 1.9 14 14 0 0 0 16.7 0v-.1a1.6 1.6 0 0 0 .7-1.7 47.4 47.4 0 0 1 0-22.5l-10.3-5.8z" class="face" /> <path d="M290.7 138.5a21 21 0 0 0 19.3-1c20.3-13 23-36.6 21.7-48.8-1.7-15.3-5.9-18-11.7-25.2s-14.1-12.3-23-12.9a12.2 12.2 0 0 0-7.9 1.7c-1 .7-1.7 2-2.8 2.7-26.7 14-31.5 65 4.4 83.5z" class="face" /> <path d="M333.1 93.8a100.2 100.2 0 0 1-.5 9.7c-4.5-5.9-1.5-11.7-4.9-25.3a18.2 18.2 0 0 0-9.6-12.4c-4.6-2.6-9.9-4-14-7.1a21 21 0 0 1-2.3-2 13.2 13.2 0 0 1-3.2-5 9.2 9.2 0 0 1-.5-2.3h4.3a23.6 23.6 0 0 1 14.8 5.5 35 35 0 0 1 6.9 7.5l.5.7c5.2 8 8.5 18.8 8.5 30.7z" class="hair" /> <path d="M299.5 48.8a8.3 8.3 0 0 1-.5 2.3 12.7 12.7 0 0 1-2.7 4.3 22 22 0 0 1-2.9 2.5 36.7 36.7 0 0 1-7.8 4.1c-6.6 2.8-13.5 5.4-15.9 15-3.3 13.3-.3 19-4.9 24.7l-.2-2q-.3-3.6-.3-7.3a53.5 53.5 0 0 1 10.5-32.7 31.3 31.3 0 0 1 9-7.7 23.3 23.3 0 0 1 11.5-3.1z" class="hair" /> <g class="heart"> <path d="M402.5 131s-13.6-20-2.6-23.1c6-1.7 8.9 7.9 8.9 7.9s8.1-5.5 11.8-.1c6.5 9.5-18 15.3-18 15.3z" /> <path d="M401.6 95.7s-9.6-8.9-4.2-11.8c3-1.6 5.7 3 5.7 3s3.6-3.8 6.2-1.4c4.5 4.2-7.7 10.2-7.7 10.2z" /> <path d="M426.3 106.1s-3.4-6.2 0-6.8c1.7-.3 2.3 2.6 2.3 2.6s2.5-1.4 3.4.3c1.6 3-5.7 4-5.7 4z" /> <path d="M196 131s13.7-20 2.7-23.1c-6-1.7-9 7.9-9 7.9s-8-5.5-11.8-.1C171.4 125.2 196 131 196 131z" /> <path d="M197 95.7s9.5-8.9 4.1-11.8c-3-1.6-5.6 3-5.6 3s-3.6-3.8-6.2-1.4c-4.6 4.2 7.6 10.2 7.6 10.2z" /> <path d="M172.2 106.1s3.4-6.2.1-6.8c-1.8-.3-2.4 2.6-2.4 2.6s-2.5-1.4-3.4.3c-1.6 3 5.7 4 5.7 4z" /> </g> <path d="M262 53.2a.3.3 0 0 1-.2 0 .4.4 0 0 1 0-.6 54.3 54.3 0 0 1 10.4-7.6c6-3.4 15.4-7.4 26.6-7a55.7 55.7 0 0 1 25.9 7.2 43.2 43.2 0 0 1 9 6.7.4.4 0 0 1 0 .6.4.4 0 0 1-.5 0 43 43 0 0 0-9-6.7 55 55 0 0 0-25.5-7.1c-11-.4-20.2 3.5-26.1 7a54 54 0 0 0-10.3 7.4.4.4 0 0 1-.2.1z" class="leaf-3" /> <path d="M300.3 38.2c.1-1.8-.1-5.3-3.6-6.6a2 2 0 0 0-2.7 2c0 1.8.9 4.2 4.3 5.4-1.8-.2-4.7.1-6.2 3a2 2 0 0 0 1.8 3 5.6 5.6 0 0 0 5.5-3.6 5.6 5.6 0 0 0 3 5.7 2 2 0 0 0 3-1.8 5.7 5.7 0 0 0-3.9-5.7c4 .3 5.6-1.7 6.4-3.5a2 2 0 0 0-1.8-2.7c-3.7 0-5.2 3-5.8 4.8z" class="flower-1" transform-origin="300 38" transform="scale(1.5)" /> <path d="M300.8 38.2c1-1.5 2.7-4.5.4-7.5a2 2 0 0 0-3.3.2c-.9 1.6-1.5 4.1.8 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.7 5.7 0 0 0 6.6 0 5.6 5.6 0 0 0-.5 6.4 2 2 0 0 0 3.4.2 5.6 5.6 0 0 0-.3-7c3.2 2.4 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6-.2-7.5 1z" class="flower-2" transform-origin="300 38" transform="scale(1.5)" /> <path d="M335.4 48.8c1-1.5 2.7-4.5.4-7.5a2 2 0 0 0-3.3.2c-1 1.6-1.5 4.1.8 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.6 5.6 0 0 0 6.5 0 5.6 5.6 0 0 0-.4 6.4 2 2 0 0 0 3.4.1 5.6 5.6 0 0 0-.3-6.9c3.2 2.3 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6.1-.2-7.5 1z" class="flower-1" transform-origin="335 48" transform="scale(1.35)" /> <path d="M334.8 48.5c0-1.9-.6-5.3-4.2-6.3a2 2 0 0 0-2.5 2.2c.2 1.8 1.2 4.2 4.8 5-1.9 0-4.7.6-6 3.7a2 2 0 0 0 2 2.7 5.6 5.6 0 0 0 5.3-4 5.6 5.6 0 0 0 3.5 5.4 2 2 0 0 0 2.8-2 5.7 5.7 0 0 0-4.4-5.3c4-.1 5.4-2.3 6-4.1a2 2 0 0 0-2-2.6c-3.7.3-5 3.5-5.3 5.3z" class="flower-2" transform-origin="335 48" transform="scale(1.35)" /> <path d="M265.8 48.8c1.1-1.5 2.7-4.5.5-7.5a2 2 0 0 0-3.3.2c-1 1.6-1.6 4.1.7 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.6 5.6 0 0 0 6.6 0 5.6 5.6 0 0 0-.5 6.4 2 2 0 0 0 3.5.1 5.6 5.6 0 0 0-.4-6.9c3.2 2.3 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6-.2-7.5 1z" class="flower-1" transform-origin="265 48" transform="scale(1.35)" /> <path d="M266 49.6c2-.4 5.2-1.5 5.6-5.2a2 2 0 0 0-2.6-2.1c-1.8.5-3.9 2-4.2 5.6-.3-1.9-1.3-4.6-4.5-5.3A2 2 0 0 0 258 45a5.6 5.6 0 0 0 4.9 4.5 5.6 5.6 0 0 0-4.8 4.4 2 2 0 0 0 2.4 2.4 5.7 5.7 0 0 0 4.6-5.2c.7 3.8 3.1 5 5 5.3a2 2 0 0 0 2.3-2.5c-1-3.6-4.4-4.3-6.2-4.3z" class="flower-2" transform-origin="265 48" transform="scale(1.35)" /> <g> <path d="M340 69.1s2-12.3 15.6-7.8c0 0-3.6 13.1-15.6 7.8z" class="leaf-2" /> <path d="M340 69.1s2-12.3 15.6-7.8c0 0-4 2.4-7.5 4.1a70.2 70.2 0 0 1-8.1 3.7z" class="leaf-1" /> </g> <g> <path d="M340.2 71.9s6.4-3.5 9.1 4.3c0 0-7.3 3-9-4.3z" class="leaf-4" /> <path d="M340.2 71.9s6.4-3.5 9.1 4.3c0 0-2.5-1-4.5-2a41.4 41.4 0 0 1-4.6-2.3z" class="leaf-3" /> </g> <g> <path d="M259.8 69.1s-2-12.3-15.6-7.8c0 0 3.6 13.1 15.6 7.8z" class="leaf-2" /> <path d="M259.8 69.1s-2-12.3-15.6-7.8c0 0 4 2.4 7.5 4.1a70.3 70.3 0 0 0 8.1 3.7z" class="leaf-1" /> </g> <g> <path d="M259.6 71.9s-6.3-3.5-9 4.3c0 0 7.2 3 9-4.3z" class="leaf-4" /> <path d="M259.6 71.9s-6.3-3.5-9 4.3l4.5-2a39.6 39.6 0 0 0 4.5-2.3z" class="leaf-3" /> </g> </svg> </div> {% schema %} { "name": "My Land Animation", "settings": [], "presets": [ { "name": "My Land Animation" } ] } {% endschema %} 这是我的CSS： @keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-webkit-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-o-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } @-moz-keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } .hair-main { animation:hair-flow 0.75s infinite alternate ease-in-out; -webkit-animation:hair-flow 0.75s infinite alternate ease-in-out; -o-animation:hair-flow 0.75s infinite alternate ease-in-out; -moz-animation:hair-flow 0.75s infinite alternate ease-in-out; } 大家好我目前面临 CSS 动画在 iOS 设备上无法按预期工作的问题。尽管使用关键帧实现标准 CSS 动画，但动画在 iPhone 和 iPad 上无法触发或无法流畅播放。以下是有关我的设置的一些详细信息：动画类型：我正在使用 CSS 关键帧来为 svg 头发设置动画。测试的浏览器：我在 iOS 上的 Safari 上进行了测试。使用的CSS属性：在代码中解释。预期行为：动画应该在 IOS 设备（例如网络和 Android 设备）上播放。当前行为：在 iOS 上，动画无法触发，头发没有上下波动。我怀疑这可能与 iOS 对动画或特定 CSS 属性的处理有关。有其他人遇到过这个问题吗？您对故障排除或解决方案有什么建议吗？任何帮助将不胜感激！我尝试使用 -webkit- 但仍然不起作用......顺便说一句，我只关注“头发”的动画谢谢！迄今为止（2024 年）webkit 无法通过 d 更改 presentation 属性 path()。作为解决方法，您可以使用 SMIL 动画来代替 @keyframes hair-flow { from { d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"); } to { d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306"); } } .hair-main2 { fill: red; animation: hair-flow 0.75s infinite alternate ease-in-out; } <h3>SVG SMIL animation</h3> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <g id="path-1"> <path d="" class="hair hair-main"> <animate attributeName="d" attributeType="XML" values="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306; M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306; M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306" dur="1.5s" repeatCount="indefinite" keyTimes="0; 0.5; 1" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" calcMode="spline" fill="freeze" /> </path> </g> </defs> <use href="#path-1" x="0" y="0" /> <use href="#path-1" x="0" y="0" transform="translate(300, 0) scale(-1, 1) translate(-300, 0)" /> </svg> <h3>CSS animation (not working in webkit)</h3> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <path id="path" d="" class="hair hair-main2" /> </defs> <use href="#path" x="0" y="0" /> <use href="#path" x="0" y="0" transform="translate(300, 0) scale(-1, 1) translate(-300, 0)" /> </svg> 您可以在 <animate> 内嵌套 <path> 元素（或通过 href 属性引用它。 values：包含逗号分隔的d（路径数据）值数组。我们需要复制第一个值，因为 SMIL 没有像 CSS alternate 那样在每次迭代中来回播放动画的本机方法 repeatCount="indefinite"使动画无限循环 keyTimes="0; 0.5; 1"指定不同动画“关键帧”的时间 keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" calcMode="spline" 模拟 ease-in-out 缓动行为另请参阅 SVG 动画指南 (SMIL)

css svg shopify css-animations webkit

回答 1 投票 0

为什么所有浏览器似乎都支持 Webkit CSS 前缀？

我想亲眼看看并测试不同的浏览器如何支持不同的供应商特定前缀（-webkit、-moz、-ms、-o）。我很惊讶地发现 Firefox 和 Safari 都支持 -webkit

css google-chrome browser webkit vendor-prefix

回答 1 投票 0

是否可以在WebKit中检测尾部调用优化？

我有一个递归函数，耗尽调用堆栈是我有时遇到的问题。我知道我可以使用流、promise 和 setTimeout，但我只想编写触发 tai 的代码...

javascript optimization webkit tail-recursion

回答 3 投票 0

Playwright 在 Github 中测试 webkit 操作错误，显示“主机系统缺少运行浏览器的依赖项”

在Github actions中对webkit进行Playwright（v1.47）测试时，突然出现错误：Error: browserType.launch: Host system is Missing dependency to run browsers。跑步者正在使用 Ubuntu ...