Chrome 在调整大小时无法正确更新背景大小渐变

2024-04-19

虽然 Firefox 正确地做到了这一点,但更新了linear-gradient每一帧上的背景,chrome 似乎都会以“跳跃”的方式渲染事物,这意味着它只会在调整大小后每隔几个像素渲染一次数学上正确的布局。

演示游乐场 http://jsbin.com/tokuvo/edit?html,css,output (尝试调整窗口大小)

/* draw 10 horizontal responsive lines in the background */
div{
    background-image: linear-gradient(90deg, transparent calc(100% - 2px), #000 100%);
    background-size: calc(100% / 10); /* 10 rows */
}

Chrome 上的背景大小未正确更新(GIF):

在 Firefox 上,一如既往,一切都运行良好:


这是一个简化的问题。我正在尝试使用响应式 css 背景渐变创建网格,但在 Chrome 中这证明很困难。

我试图避免使用大量 HTML 标记来完成此任务,因为网格大小是动态的。

有人知道在网格调整大小时帮助 Chrome 正确渲染背景大小的技巧吗?
Thanks.


更新 - 作为新发布bug https://bugs.chromium.org/p/chromium/issues/detail?id=604875


None

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

Chrome 在调整大小时无法正确更新背景大小渐变 的相关文章

随机推荐

  • 从 Windows 服务中的 OnStart 立即触发计时器_elapsed

    我正在使用一个System Timers Timer我的代码中有如下代码OnStartC Windows 服务中的方法 timer new Timer timer Elapsed timer Elapsed timer Enabled tr
  • 空的、不可编辑的 pg_hba.conf 文件

    我正在尝试使用本教程将我的 Sinatra 应用程序连接到 PostgreSQL 数据库 http samuelstern wordpress com 2012 11 28 making a simple database driven w
  • 不兼容的库版本:nokogiri.bundle 需要版本 11.0.0 或更高版本,但 libxml2.2.dylib

    当我尝试在 Hartl 的教程中运行 rspec 时 出现此错误 我用谷歌搜索了该错误 但它从来都不是针对特定版本的 而且修复程序实际上并不能解决我的问题 Users Jimbo rvm gems ruby 2 0 0 p247 gems
  • D3可折叠树不同节点颜色

    我在 d3 js 中有一个可折叠的树 我的目标是通过 类型 属性为节点着色 例如 类型 str 的节点应填充为红色 而类型 elem 的节点应填充为绿色 我就是无法让它发挥作用 有人能帮助我吗 这是我的代码
  • Android 资产、C、JNI

    如何使用 JNI 从 C 访问 Android 资产 例如 txt 文件 我正在尝试 file android asset myFile txt 以及本地 myFile txt 其中包含 jni 文件夹中的 myFile txt 副本以及
  • ActionMailer 和 Exchange

    我使用 Rails 应用程序和 Postfix 服务器成功通过 SMTP 发送邮件 现在我需要转移到启用了 POP3 和 SMTP 支持的 Exchange Microsoft ESMTP MAIL 服务 版本 6 0 3790 3959
  • SQL数据库自动备份[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有一个 SQL 数据库 我需要每天 至少 备份它 最好每天多次 自动 这样它肯定会完成 我正在运行
  • emacs - 如何在子目录中进行查找文件搜索

    我想为 Emacs 实现类似 Resharper 的 转到文件 功能 当按下上述快捷键时 Resharper 会弹出一个接受通配符字符串的文本框 并显示一个自动完成菜单 其中列出了项目中与该通配符匹配的所有文件 source jetbrai
  • 鼠标悬停时显示链接

    我有页面的某些区域 单击这些区域时 会将用户重定向到某些地址 我的问题是 当用户 将鼠标悬停在 这些区域上时 他们会看到一个指针 但不知道它链接到哪里 就我的目的而言 用户知道他们被链接到哪里是很重要的 我相信当您将鼠标悬停在链接上时 Go
  • 保存图片到mongodb

    我正在尝试使用龙卷风 石油和 mongodb 来做到这一点 avat self request files avatar 0 body nomfich self request files avatar 0 filename try ima
  • Symfony2 Doctrine2 内存泄漏/超出内存限制

    我在symfony2和doctrine2的结合上遇到了很多麻烦 我必须处理巨大的数据集 大约 2 3 百万次写入和读取 并且必须做大量额外的工作以避免内存不足 我找出了两个要点 即 泄漏 内存 它们实际上并不是真正泄漏 而是分配了很多内存
  • 优化缓慢的 ORDER BY RAND() 查询

    我有一个正在使用的查询ORDER BY RAND 但这需要太长时间 而且随着数据的增长 情况会变得更糟 该查询连接两个表 返回 5 个随机产品以及每个产品的随机图像 表 1 产品 product id pk auto inc name de
  • 下载文件 java spring Rest api

    我想制作一个rest api控制器 spring boot 当用get请求时将允许我下载一个excel文件 目前我有这个端点 RequestMapping value download xls method RequestMethod GE
  • 如何在 Bash 中保留带引号的字符串中的换行符? [复制]

    这个问题在这里已经有答案了 我正在创建一个脚本来自动创建 apache 虚拟主机 我的脚本的一部分是这样的 MYSTRING
  • 在Android中使用AudioTrack播放WAV文件

    我正在使用 Android 试图让我的 AudioTrack 应用程序播放 Windows wav 文件 Tada wav 坦率地说 这不应该这么难 但我听到了很多奇怪的事情 该文件保存在我手机的迷你 SD 卡上 读取内容似乎不是问题 但是
  • Eclipselink 生成的规范元模型不会从另一个 jar 扩展基本元模型

    我使用 Netbeans 8 0 1 创建了两个 Maven 项目来说明问题 common1 和 common2 jar common1 封装包1 MappedSuperclass public class Entity1 implemen
  • 符号被认为是标识符,而不是运算符

    我想实现一个在我的软件中使用的货币运算符 它接受 Double 并返回货币类型以进行更精确的计算 自定义运算符的代码基本上看起来有点像这样 请忽略这种形式中明显的精度下降以及因此无用的运算符 postfix operator postfix
  • 为 Phusion Passenger 应用程序设置环境变量

    我已经在开发中设置了 Passenger Mac OS X 并且它运行完美 后来唯一的问题来了 现在我有一个自定义的GEM HOME路径和 ImageMagick 二进制文件安装在 usr local 我可以将它们放入获取源的 shell
  • regexp_split_to_table 和 row_number

    我有一个包含字符串数据的表 如下所示 id string data 1 red green blue 2 orange 3 purple cyan 我需要将字符串数据拆分为具有行号的项目 id num item 1 1 red 1 2 gr
  • Chrome 在调整大小时无法正确更新背景大小渐变

    虽然 Firefox 正确地做到了这一点 但更新了linear gradient每一帧上的背景 chrome 似乎都会以 跳跃 的方式渲染事物 这意味着它只会在调整大小后每隔几个像素渲染一次数学上正确的布局 演示游乐场 http jsbin