草庐IT

html - 转换后文本模糊 : translate and it is adjacent to another element with an animation

coder 2023-08-11 原文

在下面的示例中，一个包含一些文本的 DIV(示例 A)在应用了 transform: translate CSS 时变得稍微模糊。

在文本示例 B 中，字体清晰。

该问题仅在 Google Chrome 上发生，在 FireFox 46.0.1 上运行良好。 我能够在以下位置重现它:

  • 谷歌浏览器版本 51.0.2704.84 m
  • Google Chrome 版本 53.0.2768.0 金丝雀版(64 位)

我想知道我的代码是否有问题，或者是 Chrome 中的错误。

也欢迎任何想法如何解决它，考虑到我想尽可能保留 transform:translate，我主要针对最新的 Chrome 和 FireFox。

到目前为止我注意到的注意事项:

  • 模糊效果会在不同的字体大小下以不同的级别出现。
  • 使用 webkit-font-smoothing : none; 没有帮助。
  • 任何字体(系统默认或自定义)都会出现问题。
  • 我使用的是 Window 8.1。

这是一个live example :

#test {
  position: fixed;
  font-size: 20px;
  top: 60%;
  left: 40%;
}

#splashScreen__spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -90px);
  width: 50px;
  height: 50px;
}

#splashScreen__infos {
  position: fixed;
  font-size: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-font-smoothing: none;
}

.loadingSpinner {
  width: inherit;
  height: inherit;
  border: 5px solid #3498db;
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  animation: spinnerAnimation 0.7s infinite linear;
}

@keyframes spinnerAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<body>
  <div data-ntv-type="Spinner" class="spinner" id="splashScreen__spinner" widgetid="splashScreen__spinner">
    <div id="splashScreen__spinner__spinner" class="loadingSpinner"></div>
  </div>
  <div id="splashScreen__infos">A) - We are loading your website. Please wait.</div>
  <div id="test">B) - We are loading your website. Please wait.</div>
</body>

最佳答案

这不是您代码中的错误，这是众所周知的 Webkit 渲染错误。参见示例:https://support.mozilla.org/pl/questions/1075185 (以及 FF 支持论坛上的更多主题)。

在 Chrome 和 FF 中，在高级浏览器设置中，您可以关闭所谓的“硬件加速”。此设置的存在是为了让您的硬件在涉及高级图形渲染时“帮助”浏览器。对于您使用 translate 和一些其他规则的元素，硬件加速会自动打开。这实际上有时被没有经验的“css 黑客”用来在某些情况下实现更好/更清晰的渲染。

但有时它造成的坏处多于好处，这就是你的情况。在浏览器中关闭硬件加速后，字体就非常清晰了。遗憾的是，在代码方面没有真正的解决方案，您不能针对给定元素强制关闭它。我们依赖于 Webkit 开发人员在这里修复渲染引擎。您只能随意修改，例如将字体大小更改为无缘无故呈现更好的字体大小。或者以某种不涉及 translate 的方式改变定位。祝你好运。

关于html - 转换后文本模糊 : translate and it is adjacent to another element with an animation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37856596/

后文animationsectioncodetranslatehtmlcssgoogle-chrome

有关html - 转换后文本模糊 : translate and it is adjacent to another element with an animation的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  4. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  7. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  8. ruby-on-rails - 使用 ruby​​ 将多个实例变量转换为散列的更好方法？ - 2

    我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效，它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗？编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分，但这仍然是主要问题。

  9. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  10. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

随机推荐