如何将 WebKit 宏从 CSS 或 JS 更改为 false

Question

Safari Tech Preview 26 中引入的用于异步加载大图像的新 WebKit 功能导致基于 mjpg-streamer 网络摄像头的流闪烁，默认为 true 的布尔值属性，largeImageAsyncDecodingEnabled，导致此问题。 Link to the property definition

我正在尝试找到一种方法，使用 CSS 或 JS 在 html 页面上将此属性设置为 false。这可能吗？或者有其他方法吗？

这是用于 OctoPrint 运行 OctoPi 的 3D 打印机服务器。我通过反复试验发现，任何超过 453x453 像素的图像都会被异步加载并导致闪烁；它类似于烦人的频闪灯效果。我使用的网络摄像头分辨率为 1280x720，在技术预览 26 之前没有问题。

感谢您的帮助！

Answer 1

您无法覆盖宏。但是您可以在加载图像后强制加载页面的其余部分。

通过使用CSS/JS？为什么？使用普通 HTML

存在 link rel preload 标记。阅读更多 here on W3C

重要的部分是

The preload keyword on link elements provides a declarative fetch primitive that addresses the above use case of initiating an early fetch and separating fetching from resource execution. As such, preload keyword serves as a low-level primitive that enables applications to build custom resource loading and execution behaviors without hiding resources from the user agent and incurring delayed resource fetching penalties.

如何实现

<!-- preload stylesheet resource via declarative markup -->
<link rel="preload" href="url" as="image">

<!-- or, preload stylesheet resource via JavaScript -->
<script>
  var res = document.createElement("link");
  res.rel = "preload";
  res.as = "image";
  res.href = "url";
  document.head.appendChild(res);
</script>

If the load was successful, queue a task to fire a simple event named load at the link element. Otherwise, queue a task to fire a simple event named error at the link element.

if a resource is fetched via a preload link and the response contains a no-cache directive, the fetched response is retained by the user agent and is made immediately available when fetched with a matching same navigation request at a later time

更新

根据我们的评论讨论，

你有2个选项。 1. 尝试将 img 标签更改为 video，因为该问题仅影响 img 标签。

为此使用以下代码

$(document).ready(function(){
  var newTag=$('img')[0].cloneNode(true);
  newTag = $(newTag).wrap("<video></video>")[0].parentNode;
  newTag = $(newTag).wrap("<div></div>")[0];
  newTag = newTag.parentNode.innerHTML;
  newTag = newTag.replace("img","source");
  $('img').replaceWith(newTag);
});

强制用户选择其他浏览器。也就是说，如果您使用 window.userAgent 检测到它是 Safari 技术预览版 26，则将它们导航到另一个页面，说 由于兼容性问题不支持此版本的浏览器。请降级/选择其他浏览器。 - 请注意，这可能是暂时的。由于这是一个已知问题（闪烁），他们将在未来提供修复。

特别感谢 To markdown 在几秒钟内将 HTML 转换为 Markdown（我没有任何隶属关系）

Answer 2

我看不到任何不会变成完整结构的客户端 hack。您也许可以绕过它，但向 WebKit 报告它似乎是最好的方法。

WebKit-bug 170640 是阻止启用 largeImageAsyncDecodingEnabled 的原因。它也引起了闪烁。修复后，他们默认启用它。然而，这表明仍然存在问题。

HTTP headers 检索自 GitHub

如果有人决定向 WebKit 提交错误报告，这可能会有所帮助。

标准header如下

mjpg-streamer/mjpg-streamer-experimental/plugins/output_http/httpd.h

#define STD_HEADER "Connection: close\r\n" \
"Server: MJPG-Streamer/0.2\r\n" \
"Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
"Pragma: no-cache\r\n" \
"Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"

然后对于实际的图像流：

mjpg-streamer-experimental/plugins/output_http/httpd.c#L466

sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
        "Access-Control-Allow-Origin: *\r\n" \
        STD_HEADER \
        "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
        "\r\n" \
        "--" BOUNDARY "\r\n");

注意一点，WebKit 中似乎已经有一个 settings/toggle 来启用 and/or 禁用 largeImageAsyncDecodingEnabled，检查一下 here。我怀疑这是否可以通过 Safari 的 UI 访问，并且在没有用户交互的情况下无法解决问题。

Answer 3

该问题现已在 Safari Tech Preview 37 中得到修复。https://trac.webkit.org/changeset/219876/webkit/

如何将 WebKit 宏从 CSS 或 JS 更改为 false

How to change WebKit macro to false from CSS or JS

javascript

css

jquery

webkit

octoprint

通过使用CSS/JS？为什么？使用普通 HTML

更新