问题标签 [webpage-rendering]

我有一个 SVG 图像，我需要将它放在我的网页标题中。图像的边缘是像素化的，这让我很困扰。现在我的问题是，是否有某种方法可以从 SVG 中移除这些像素化边缘。下面是我的 SVG 示例。

橙色部分是我正在谈论的 SVG 图像。

我正在使用 Selenium 呈现网页，然后进行内容提取。但是，我发现 selenium 返回的内容与我使用 Chrome DevTools 得到的不同。

我使用的python代码很简单：

基本上，我发现我正在查看的字段大部分时间都不会从 Selenium 结果中显示出来。它有时确实有效，但在大多数情况下，它只是无法呈现真正的 Chrome 浏览器所做的事情。我正在使用 Macbook Pro。谢谢~

我在控制器级别使用来自 TYPO3 8 的新页面渲染器通过 initializeAction 添加扩展特定的 css 和 js 文件：

这有时工作正常，但只是有时。这意味着有时会正确添加 css 文件和 js 文件，有时如果我重新加载页面，则无法正确添加文件。有什么不对？

对于像 TYPO3 7 这样的旧版本，我使用了类似的东西：

但这不再适用于 TYPO3 8。有什么建议么？

我在https://www.odoo.com/apps/modules/8.0/web_menu_hide_8.0/上安装了网络隐藏菜单

我修改为在 Odoo 10 上使用它，但是如果我们按下隐藏按钮，表单将调整为全宽，如果我们在按下隐藏按钮后更改为另一个视图，表单页面将保持与原始页面相同（不完整宽度）。

所以我需要在页面渲染后在表单视图上调整类“o_form_sheet”。我可以知道如何使用 javascript 做到这一点吗？我需要扩展哪个类和方法？

在生产网站（不能透露）中，正常粗细的字体似乎首先呈现，然后粗体粗细的字体稍后呈现。两者都使用相同的字体系列。在 Chrome / Opera 上可以看到这种行为。正常和粗体字体从不同的字体文件 (woff) 加载。此外，文件下载之间几乎没有任何时间差异。

有什么办法可以改进吗？

看看所附图片中的 nytimes.com。这种行为不适合我。对于我的网站，Normal Font weight 先加载，然后再加载粗体。文本也在同一部分

我使用以下语法来查找页面加载时间，但不确定如何使用 javascript 识别页面呈现时间。

我有两种方法。

我可以 ：

或者也许我应该使用：

哪种解决方案更好，为什么？

我正在为我的网站开发一个简单的不透明度滑块，我遇到了一个奇怪的渲染错误（？），它只发生在 Firefox 中（Chrome 和 Opera 可以完美地处理它）。

问题是当幻灯片相互更改时，它们上方会出现一条水平线：

显然它与切换图像的箭头有关。如果我设置display: none为它们，则不会出现任何线条。

箭头的> <跨度很简单，并且它们具有文本阴影。如果我从它们中删除文本阴影，线条会变细：

带箭头的 Span 绝对位于 div 内，每个 div 占据幻灯片容器的一半。这些 div 位于其他 div 中，该 div 与幻灯片同级并且z-index:1必须在它们之上。如果我为跨度设置右/左位置，以便它们只是稍微叠加图像，或者如果我出于相同目的使 div 更薄（例如，40% 而不是 50%），则该行消失：

看起来它似乎与跨度的宽度有关，但设置 max-width 和 display: block 也无济于事。

我怎样才能摆脱这条奇怪的线？也许有CSS hacks？您可以在此处自行检查滑块。谢谢！

我尝试缩小图片（代表渲染文本）。

我注意到不同的浏览器在处理缩放和抗锯齿的方式上会给出非常不同的结果（似乎它们几乎都默认应用）。

这是一个 jsfiddle（我只能依靠我的 Mac 上的结果来查看问题，它也必须在不同的浏览器上进行测试）： https ://jsfiddle.net/ottmobk9/7/

• Firefox（在 Mac 上）：原始尺寸有点模糊（这很奇怪），但缩放后的尺寸看起来非常清晰。

• Chrome（在 Mac 上）：原始大小很清晰，但缩放会自动应用某种过滤器，这会使调整大小的文本立即变得模糊。

• Safari 和 Opera（在 Mac 上）介于两者之间，因为原始图片很清晰，但在缩放后，它们会在应用某种抗锯齿“过滤器”之前使图片保持清晰约一秒钟。

这些在不同浏览器上的测试证明，模糊渲染不是原始图片和缩放图片之间的非整数比率问题。

Firefox 开始不好，但结果很好。

Safari/Opera：开始良好但一秒钟后结束

Chrome：开始很好，但很快就结束了。

但这并不是致命的，因为 Firefox 显示了一个不错的最终缩放图片，而 Safari/Opera 将缩放的图片渲染了大约一秒钟。Chrome 无法正确处理它。

所以，这些浏览器对图片应用了一些东西，我希望如果没有要求，就不要应用这个“东西”，这是一个公平的要求。

因此，我尝试使用“图像渲染”属性（在 JSfiddle 的 css 部分取消注释以查看它的实际效果）。

它有效。有点儿。这取决于图片......所以，它不是问题解决者。

为了证明这一点，这是另一个测试，我们可以看到它在所有情况下都不能很好地工作： https ://jsfiddle.net/9f36rtza/34/

• Firefox（在 Mac 上）：无论出于何种原因，与原始图片（应该是相同大小）相比，未缩放/未过滤的图片再次有点模糊。但是“图像渲染”给出了非常接近原始的缩放结果。比未缩放的图片要多得多，这很奇怪。

• Chrome 和 Opera（在 Mac 上）：未缩放的图片应有的清晰，而带有“图像渲染”的缩放图片有点模糊。不过，小于缩放/未渲染的图片。

• Safari（在 Mac 上）：这绝对是最糟糕的。未缩放的图片是完美的。缩放但未过滤的版本有点模糊。缩放和“图像渲染”的图片完全被过度处理了。看起来图片已经连续锐化了好几次。仅此一项就使“图像渲染”属性无法用于生产。

仅供参考：在 JSFiddle 中，我还添加了“字体平滑”和“文本渲染”属性（如果您想查看它们的实际效果，请取消注释）。但是，由于我们不处理真实​​的文本，当然，它不会改变任何事情。

总而言之，“图像渲染”看起来并没有取消激活浏览器默认应用的“抗锯齿”过滤器。它似乎只是添加了一个新的图像渲染过程层，每个浏览器都或多或少地处理得很好。所以，它不是问题解决者。它只是或多或少地隐藏了问题，具体取决于图片。有时甚至更糟（Safari）。我想要的只是为任何大小的图片停用任何不需要的抗锯齿处理，并在所有浏览器中获得一致的结果。

所以，我有一个情况。我需要一个忠实的渲染，因为我正在做一个 web 应用程序，它渲染包含人们可以缩放的图片和文本的 div，最终目的是以高分辨率打印结果。应用的过滤器不仅允许我这样做，而且我没有找到在任何情况下都有效的解决方案或解决方法。根据浏览器的不同，人们会得到各种结果，但没有一个是完美的。

如果我不应用“图像渲染”，除了 Firefox 之外的所有上述浏览器都会给我一个模糊的渲染。如果图片没有缩放，Firefox 会给我一个模糊的渲染。

但是，如果我确实应用了“图像渲染”，则没有一个可以很好地处理清晰度。Firefox 是最差的，但也不是完美的。他们每个人似乎都应用了另一个过滤器，而不是仅仅停用他们刚刚应用的抗混叠过滤器。

那么，我能做些什么呢？ 理想的方法是首先知道如何不应用该抗混叠滤波器。

当然我可以使用其他方式来缩小图片（css scale/zoom），但它是一样的。我试过了。缩放方法似乎不是问题，它是浏览器在所有情况下呈现缩放图像的方式。

谢谢您的帮助。

我使用了以下代码：

一切正常。如何使用 html 文件显示此图像

你能把代码发给我吗，如果有的话