How to change WebKit macro to false from CSS or JS

Question

The new WebKit feature for loading large images asynchronously injected into Safari Tech Preview 26 causes the mpg-streamer webcam streams to flicker, so the default boolean problem is true, largeImageAsyncDecodingEnabled . Property Definition Reference

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

This is for OctoPrint running OctoPi for a 3D print server. I found through the trial version and an error, any image over 453x453 px is loaded asynchronously and causes flickering; it looks like the annoying strobe light effect. I am using 1280x720 resolution for webcam and there is no problem before technical viewing 26.

Thanks for the help!

Answer 1

Now the problem is fixed in Safari Tech Preview 37. https://trac.webkit.org/changeset/219876/webkit/

Answer 2

You cannot override a macro. But you can make the rest of the page load after loading the image.

Using CSS / JS? What for? Use plain HTML

There is link rel preload . Read more here at W3C

The important parts are

The preload keyword in link elements provides a declarative extraction primitive, which refers to the above use case for initiating early extraction and splitting a selection from resource execution. Thus, the preload keyword serves as a low-level primitive that allows applications to create custom downloads and perform actions to load resources without hiding resources from the user agent and without causing deferred fines for access to resources.

How to achieve this

 <!-- 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 download is successful, put the task in fire with a simple event named load in the link element. Otherwise, set the task to fire a simple event called error in the link element.

if the resource is retrieved via the preload link, and the response contains the no-cache directive, the selected response is saved by the user agent and immediately becomes available when it is selected with a similar navigation request later

Update

Based on the comments, we had,

You have 2 options. 1. Try changing the img tag to video , since the problem only applies to the img tag.

Use the following code for this

 $(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 select a different browser. That is, if you find that it is Safari tech preview 26 using window.userAgent , then go to another page that says that this version of the browser is not supported due to compatibility issues. Please downgrade / select another browser. - Please note that this may be temporary. Since this is a known problem (flickering), they will provide a fix in the future.

   ---

Special thanks Markdown for converting HTML to Markdown in a few seconds (I don't have any affiliation)

Answer 3

I do not see any hacking on the client side, which does not turn into a full-blown design. You might be able to hack it, but reporting it to WebKit seems to be best.

WebKit error 170640 is what prevented largeImageAsyncDecodingEnabled from turning on. It also caused flickering. Once this was fixed, they turned it on by default. However, this suggests that the problem still remains.

---

HTTP headers extracted from github

This can be useful if someone decides to submit a bug report to WebKit.

The standard title is as follows.

MJPG braid / MJPG braid-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" 

Then for the actual image stream:

MJPG braid-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"); 

---

A small note already has settings / switches in WebKit to enable and / or disable largeImageAsyncDecodingEnabled, check here . I doubt that this is available through Safari UI tho and does not solve the problem without user interaction.