How to change WebKit macro to false from CSS or JS

Question

The new WebKit feature for loading large images asynchronously introduced in Safari Tech Preview 26 causes mjpg-streamer webcam based streams to flicker, the boolean property that defaults to true, largeImageAsyncDecodingEnabled, causes this issue. Link to the property definition

I am trying to find a way to set this property to false on the html page with CSS or JS. Is this even possible? Or is there another way to do it?

This is for OctoPrint running OctoPi for a 3D printer server. I found through trial and error, any image over 453x453 px is loaded asynchronously and causes the flicker to happen; it's akin to an annoying strobe light effect. I am using a resolution of 1280x720 for the webcam, and there is no issue before tech preview 26.

Thank you for the help!

Answer 1

The issue has now been fixed in Safari Tech Preview 37. https://trac.webkit.org/changeset/219876/webkit/

Answer 2

You can't override the macro. But you may force the rest of the page to load after the image loaded.

By using CSS/JS? Why? Use plain HTML

There is a link rel preload markup exists. Read more here on W3C

The important parts are

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.

How to achieve that

<!-- 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

Update

Based on comments discussion we hade,

You have 2 options. 1. Try to change the img tag to video since the issue only affect img tag.

Use the following code for that

$(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);
});

2. Force the user to choose another browser. That is if you detected it is Safari tech preview 26 by using window.userAgent, then navigate them to another page saying that this version of browser is not supported because of compatibility issues. Please downgrade/ choose another browser. - note that this may be temporary. Since it is a known issue(the flickering), they will provide a fix in the future.

---

Special thanks to To markdown for converting HTML to Markdown within fraction of seconds (I don't have any affiliation)