个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
在下面的示例中，一个包含一些文本的 DIV(示例 A)在应用了 transform: translate CSS 时变得稍微模糊。
在文本示例 B 中，字体清晰。
该问题仅在 Google Chrome 上发生，在 FireFox 46.0.1 上运行良好。我能够在以下位置重现它:
我想知道我的代码是否有问题，或者是 Chrome 中的错误。
也欢迎任何想法如何解决它，考虑到我想尽可能保留 transform:translate，我主要针对最新的 Chrome 和 FireFox。
到目前为止我注意到的注意事项:
webkit-font-smoothing : none; 没有帮助。这是一个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/
25
4
0
我听说 Translate API 需要付费，但究竟是什么阻止了我们使用免费的 Google 翻译服务 here免费 ？否则，免费服务的限制是什么？ 最佳答案 根据下面的链接，没有什么可以阻止您。 h
我正在修复我的 Karma 配置以运行 Angular2 - rc 1 版本的测试。我可以运行测试，但如果我在 html 中有一个翻译管道，它们就会失败。(我可以让它工作的配置是从 [这里][1] 得
我正在使用以下代码： GttService myService = new GttService("ex1cor.ex1Ap.1"); myService.setUserCredentials("ex
是否可以在 Silverstripe 3 中翻译数据对象？ 我使用这个模块: http://www.silverstripe.org/translatable-module/ 在我的配置中是否定义了以
我有以下三个问题 我想使用 Google 的 API 来翻译文本。我知道谷歌对翻译和检测单独收费。谷歌翻译也支持翻译两种翻译方式 i) 通过指定源和目标，如 https://www.googleapi
我一直在使用 Microsoft Translator 的 HTTP API 来翻译我网站上的文本。 作为the documentation describes , 有一个选项可以指定翻译的类别。找不
当您在 localhost 上开发应用程序时，是否有机会在不获取 key 的情况下使用 Use Google Translation API？ 我希望这样的事情能够奏效' https://www.go
我正在尝试翻译实体的某些字段，但在尝试创建对象时出现以下错误... id; } /** * Set name * * @param string $nam
当用户访问我们的网站时，我们使用 Google Translate API 将我们的内容翻译成用户的语言。 (当然，我们遵循署名和链接要求，以便用户知道内容是 Google 的翻译。) 为了优化，我们
我非常频繁地使用谷歌翻译 API V2，在大约 2000 个请求之后，我开始在返回的 JSON 中得到这个: Array ( [error] => Array (
我刚开始使用 Google 翻译 API，在测试过程中我们注意到，对于某些翻译(我尚未找到模式)，我们会在响应中收到\u200b 字符。这会导致很多问题，最重要的是，它似乎没有任何目的或没有任何意义。
从laravel 5.8升级到laravel 6.0后，发现这个错误。 Method Illuminate\Translation\Translator::getFromJson does not e
这是一个基本的移动滑入/滑出菜单。 我发现很难调试，但基本上我的问题是，当我按下菜单按钮时，菜单会顺利打开，再次按下它会顺利关闭。然而，当我再次按下它(第三次)时，它不顺利打开，它只是出现。但是它仍然
我的 Android Studio 的翻译编辑器无法正常工作。如果我打开翻译编辑器确实列出了字符串的正确键，但是找不到默认值和翻译。所有键都有一个默认值，其中大多数也有一个翻译。 我重新启动了 And
我正在尝试从 python 控制台而不是通过 bazel -build 运行 Tensorflow 的 translate.py，但我在这两行出现错误: from tensorflow.models.
本文整理了Java中org.apache.tika.language.translate.YandexTranslator.translate()方法的一些代码示例，展示了YandexTranslat
我需要来自 Google Transle API 的同义词信息。有没有可能得到它？ 最佳答案 抱歉不行。看到这个 post .看起来他们opened a PIT添加功能。你应该给它加星号来增加重量!
我在我的一个项目中使用 Google Cloud Translation API。我想指定翻译的性别。我无法在 Google Cloud Translation 中找到相关信息。我也在互联网上搜索了很
我已经在我的 Angular-Cli 应用程序中实现了 ngx-translate 并且在我执行以下操作时工作正常: {{ 'some.value' | translate }} 但是我该如何翻译 H
我决定在我的项目中使用 Google Cloud Translation API。在我尝试运行他们的脚本之前，一切似乎都很好。它总是说我需要“使用 require([])”。 在我在 require
我是一名优秀的程序员,十分优秀！