检查硬件加速可用性? (可测试)

2023-12-01

我编写了使用 -webkit-transform、-webkit-perspective 和几个类似的 CSS。我的设计在可以使用硬件加速的机器上看起来非常出色,但在不使用硬件加速时实际上无法使用。如何检查硬件加速可用性并提供后备 CSS?

旁注:运行 chrome://gpu-internals/ 手动检查可用性。


可悲的是,答案似乎是“你还不能”。

Modernizr 项目将硬件加速列为“不可检测的”:https://github.com/Modernizr/Modernizr/wiki/UnDetectables.

部分问题似乎是在渲染页面上的任何内容时根据具体情况使用硬件加速。因此,即使浏览器理论上可能支持硬件加速,但它是否会用于任何给定的操作(翻译、转换、重绘等)将无法提前得知。

您可以想象一种检测方案,使用分析来检测有/没有硬件加速的性能变化 - 但使用硬件加速的事情发生在页面视图之外的层中。例如,即使您可以可靠地启用/禁用硬件加速,您也无法检测过渡的帧速率。

webkit 渲染 API 看起来像是可以使用此信息的地方,但它看起来无法通过页面级 Javascript 访问(即使 DOM 中的节点附加有 RenderObjects):https://www.webkit.org/blog/114/webcore-rendering-i-the-basics/

看起来唯一可行的选择是用户代理嗅探已知加速浏览器的列表(恶心)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

检查硬件加速可用性? (可测试) 的相关文章

  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • CSS:仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • 是否可以将一个 CSS 类的优先级设置为高于另一个 CSS 类的优先级?

    假设我有一个 div 它使用两个 css 类 这两个类都使用文本对齐 但一个居中 另一个右对齐 是否可以指定一个类别优先于另一个类别的内容 指定更具体的选择器 例如在其前面添加 ID 前缀或在类前面添加节点名 将其分配在其他班级之后 如果两
  • 如何使用 SVG 形状进行图像裁剪?

    任何人都可以指导我如何使用 SVG 独特的形状制作 CSS 图像剪辑路径 有些人建议使用第三方插件 例如 SVG Injector 等 任何人都可以帮助我如何完成这项适用于所有浏览器的任务 我给出了一张示例图片以使其更好地理解 请检查下图
  • jQuery:在视口中居中 fancybox

    我目前正在使用 fancybox 版本 2 在单击缩略图时显示我的图像 但我似乎无法让 fancybox 位于视口的中间 垂直而言 因为水平方向没问题 我已经尝试了很多事情 这是最新的 CSS fancybox wrap position
  • DIV 内的右对齐按钮

    作为一名后端开发人员 我感觉更舒服 但我有一个样式问题困扰着我 我已经发布了我的场景示例here http jsfiddle net jDaM8 1 我正在创建一个 div 它根据单击按钮显示 隐藏以显示特定项目的详细信息 该部分工作正常
  • 添加自定义 CSS 到 Jekyll

    我是 Jekyll 新手 我正在按顺序使用自定义 html 和 css 制作一个网站 Jekyll 默认下载 minima 主题 所以我用以下 html 覆盖了主页 all my html
  • 最小高度:自动在 Opera 中不起作用

    我注意到min height不在 Opera 中工作 我正在尝试这样的事情 div class content div div class content newstyle div 我的 CSS 代码是 content min height
  • css 表格单元格,内容有不必要的上边距

    我在代码中使用 div 块的表格单元格排列 我的代码有问题 我的 html 的预览是here http jsbin com avozik 10 edit preview 当我的第一个面板中有任何内容 文本或图像 时 inner第二个和第三个
  • 角度材料在一个表单字段中输入和选择

    I want the input field and the drop down field in the same area like the one on the left I did this on the inspector 无论我
  • 角度按钮单击旋转图标

    我有以下按钮
  • 纯CSS代码,没有绝对定位

    我试图想出一个纯CSS代码 就像你在电视上看到的那样 仅not粘在屏幕底部 我已经找到了涉及 JS 的东西 但我正在努力避免 JS 我还发现了一些其他人创建的纯 CSS 代码 但这些的问题在于它们都使用position absolute 这
  • 是否可以对 Flexbox 插入、删除和项目位置进行动画处理?

    这个问题最初是在 2012 年提出的 https stackoverflow com questions 11106876 is it possible to animate flexbox inserts removes但是提供的答案并未
  • 当CSS文件存在时,无法在服务器上找到它们[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 当运行本地服务器时 这一切都运行良好 我有 header html 其中包含以下代码 在 public html 目录 与 header h

随机推荐