npm - @glitchr/transparent - Versions diffs - 1.0.66 → 1.0.71 - Mend

@glitchr/transparent 1.0.66 → 1.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

	@@ -1,2 +1 @@
1 1	# TransparentJS
2	-

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/transparent",
-  "version": "1.0.66",
+  "version": "1.0.71",
   "description": "Transparent SPA Application",
   "main": "src/index.js",
   "access": "public",

package/src/js/transparent.js CHANGED Viewed

@@ -1,5 +1,3 @@
-import $ from 'jquery';
 // Modern browser: use passive event listeners where appropriate for better performance
 jQuery.event.special.touchstart = { setup: function( _, ns, handle ) { this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") }); } };
 jQuery.event.special.touchmove  = { setup: function( _, ns, handle ) { this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") }); } };
@@ -14,7 +12,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
     } else if (typeof exports === 'object') {
         module.exports = factory();
     } else {
-        root = window;
         root.Transparent = factory();
     }
@@ -184,14 +181,14 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         "smoothscroll_easing"  : "swing",
         "exceptions": [],
         // headlock: list of url substrings/regex to preserve in <head> across page transitions
-        // (e.g. third-party widgets like Brevo that inject <style>/<link> dynamically).
+        // (e.g. third-party widgets that inject <style>/<link> dynamically).
         // In addition, head nodes injected dynamically AFTER initial DOMContentLoaded are
         // preserved automatically. Use data-headlock="false" on a head element to opt-out.
         "headlock": []
     };
     // Set of <head> children present on initial load. Anything added after is treated
-    // as dynamically injected (e.g. Brevo widget) and preserved across transitions.
+    // as dynamically injected and preserved across transitions.
     var originalHeadNodes = new WeakSet();
     function snapshotHeadNodes() {
         var head = document.head;
@@ -199,10 +196,13 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         for(var i = 0; i < head.children.length; i++)
             originalHeadNodes.add(head.children[i]);
     }
-    if(document.readyState === "loading")
+    // Snapshot synchronously at module-eval time (scripts at end of <body> run before any
+    // async script can inject <style> tags, so the snapshot is clean).
+    // A DOMContentLoaded fallback is kept for the rare case where document.head is null
+    // (e.g. script loaded inside <head> before it finishes parsing).
+    snapshotHeadNodes();
+    if(!document.head)
         document.addEventListener("DOMContentLoaded", snapshotHeadNodes, { once: true });
-    else
-        snapshotHeadNodes();
     Transparent.isHeadlocked = function(el) {
         if(!el || el.nodeType !== 1) return false;
@@ -213,10 +213,12 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         if(attr !== null && attr !== undefined) return true;
         // Dynamically injected after initial load
         if(!originalHeadNodes.has(el)) return true;
-        // URL pattern match
+        // URL pattern match (src/href attributes)
         var patterns = Settings["headlock"] || [];
         if(!patterns.length) return false;
         var url = el.getAttribute && (el.getAttribute("src") || el.getAttribute("href"));
+        // <style> elements have no src/href — match against CSS textContent instead
+        if(!url && el.tagName === 'STYLE') url = el.textContent || '';
         if(!url) return false;
         for(var i = 0; i < patterns.length; i++) {
             var p = patterns[i];
@@ -224,7 +226,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             else if(typeof p === "string" && p.length && url.indexOf(p) !== -1) return true;
         }
         return false;
-    };
+    }
     const State = Transparent.state = {
@@ -244,9 +246,9 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         CLICK      : "click",
         PREACTIVE  : "pre-active",
-        ACTIVEIN   : "active-in",
+        FADEIN     : "fade-in",
         ACTIVE     : "active",
-        ACTIVEOUT  : "active-out",
+        FADEOUT    : "fade-out",
         POSTACTIVE : "post-active",
         NOTIFICATION: "notification"
@@ -323,6 +325,37 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
     }
     Transparent.setResponse = function(uuid, responseText, scrollableXY = [], exceptionRaised = false)
+    {
+        if(isDomEntity(responseText))
+            responseText = responseText.outerHTML;
+        var array = JSON.parse(sessionStorage.getItem('transparent')) || [];
+        array.push(uuid);
+        while(array.length > Settings["response_limit"])
+            sessionStorage.removeItem('transparent['+array.shift()+']');
+        try {
+            if(isLocalStorageNameSupported()) {
+                sessionStorage.setItem('transparent', JSON.stringify(array));
+                sessionStorage.setItem('transparent[response]['+uuid+']', responseText);
+                sessionStorage.setItem('transparent[position]['+uuid+']', JSON.stringify(scrollableXY));
+            }
+        } catch(e) {
+            if (e.name === 'QuotaExceededError')
+                sessionStorage.clear();
+            return exceptionRaised === false ? Transparent.setResponse(uuid, responseText, scrollableXY, true) : this;
+        }
+        return this;
+    }
+    Transparent.setResponse = function(uuid, responseText, scrollableXY, exceptionRaised = false)
     {
         if(isDomEntity(responseText))
             responseText = responseText.outerHTML;
@@ -462,7 +495,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         if($(Transparent.html).hasClass(Transparent.state.FIRST)) {
             Transparent.scrollToHash(location.hash, {}, function() {
-                Transparent.activeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
+                Transparent.fadeOut(() => Transparent.html.removeClass(Transparent.state.FIRST));
             });
         }
@@ -588,7 +621,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             }
         }
-        var closestEl = $(el).closest("a");
+        closestEl = $(el).closest("a");
         if(!closestEl.length) closestEl = $(el).closest("button");
         if(!closestEl.length) closestEl = $(el).closest("input");
         if (closestEl.length) el = closestEl[0];
@@ -803,9 +836,10 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         return {delay:delay, duration:duration};
     }
-    var activeInTime = 0;
-    var activeInRemainingTime = 0;
-    Transparent.activeIn = function(activeCallback = function() {}) {
+    var fadeInTime = 0;
+    var fadeInRemainingTime = 0;
+    Transparent.fadeIn = function(activeCallback = function() {}) {
         if(!Transparent.html.hasClass(Transparent.state.PREACTIVE)) {
             Transparent.html.addClass(Transparent.state.PREACTIVE);
@@ -813,18 +847,18 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         }
         var active = Transparent.activeTime();
-        activeInTime = Date.now();
-        activeInRemainingTime = active.delay+active.duration;
+        fadeInTime = Date.now();
+        fadeInRemainingTime = active.delay+active.duration;
         Transparent.html.removeClass(Transparent.state.PREACTIVE);
-        if(!Transparent.html.hasClass(Transparent.state.ACTIVEIN)) {
-            Transparent.html.addClass(Transparent.state.ACTIVEIN);
-            dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVEIN));
+        if(!Transparent.html.hasClass(Transparent.state.FADEIN)) {
+            Transparent.html.addClass(Transparent.state.FADEIN);
+            dispatchEvent(new Event('transparent:'+Transparent.state.FADEIN));
         }
         Transparent.callback(function() {
-            Transparent.html.removeClass(Transparent.state.ACTIVEIN);
+            Transparent.html.removeClass(Transparent.state.FADEIN);
             if(!Transparent.html.hasClass(Transparent.state.ACTIVE)) {
                 Transparent.html.addClass(Transparent.state.ACTIVE);
                 dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
@@ -834,23 +868,23 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             Transparent.callback(function() {
                 activeCallback();
-                activeInRemainingTime = 0;
+                fadeInRemainingTime = 0;
             }.bind(this), active.duration);
         }.bind(this), active.delay);
     }
-    Transparent.activeOut = function(activeCallback = function() {}) {
+    Transparent.fadeOut = function(activeCallback = function() {}) {
         if(!Transparent.html.hasClass(Transparent.state.ACTIVE)) {
             Transparent.html.addClass(Transparent.state.ACTIVE);
             dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVE));
         }
-        if(!Transparent.html.hasClass(Transparent.state.ACTIVEOUT)) {
-            Transparent.html.addClass(Transparent.state.ACTIVEOUT);
-            dispatchEvent(new Event('transparent:'+Transparent.state.ACTIVEOUT));
+        if(!Transparent.html.hasClass(Transparent.state.FADEOUT)) {
+            Transparent.html.addClass(Transparent.state.FADEOUT);
+            dispatchEvent(new Event('transparent:'+Transparent.state.FADEOUT));
         }
         var active = Transparent.activeTime();
@@ -862,7 +896,9 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             var active = Transparent.activeTime();
             Transparent.callback(function() {
-                Transparent.html.removeClass(Transparent.state.ACTIVEOUT);
+                Transparent.html.removeClass(Transparent.state.FADEOUT);
+                ajaxSemaphore = false;
                 if(Transparent.html.hasClass(Transparent.state.LOADING)) {
                     dispatchEvent(new Event('transparent:'+Transparent.state.LOADING));
@@ -870,7 +906,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     Object.values(Transparent.state).forEach(e => Transparent.html.removeClass(e));
                     Transparent.html.addClass(Transparent.state.ROOT + " " + Transparent.state.READY);
                 }
                 Transparent.html.addClass(Transparent.state.POSTACTIVE);
                 var active = Transparent.activeTime();
@@ -903,7 +939,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             } else {
                 if(dom === undefined)
-                    console.error("Response missing..");
+                    console.alert("Response missing..");
                 var parent = Transparent.findElementFromParents(dom, $(this).parents(), 3);
                 if (parent === undefined) {
@@ -953,7 +989,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         var head = $(dom).find("head").html();
         var body = $(dom).find("body").html();
-        if(head == undefined || body == undefined) {
+        if(head == undefined || body == "undefined") {
             $(Settings.identifier).html("<div class='error'></div>");
@@ -967,8 +1003,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             Transparent.evalScript($("body")[0]);
         }
-        Transparent.scrollTo({top:0, left:0, duration:0});
-        Transparent.activeOut();
+        Transparent.fadeOut();
     }
     Transparent.userScroll = function(el = undefined) { return $(el === undefined ? document.documentElement : el).closestScrollable().prop("user-scroll") ?? true; }
@@ -987,19 +1022,18 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             var maxScrollY = $(el).prop("scrollHeight") - Math.round($(el).prop("clientHeight"));
             if (maxScrollY == 0) maxScrollY = Math.round($(el).prop("clientHeight"));
-            var scrollTop  = Math.max(0, Math.min(dict["top"] ?? $(el).prop("scrollTop"), maxScrollY));
-            var scrollLeft = Math.max(0, Math.min(dict["left"] ?? $(el).prop("scrollLeft"), maxScrollX));
+            scrollTop  = Math.max(0, Math.min(dict["top"] ?? $(el).prop("scrollTop"), maxScrollY));
+            scrollLeft = Math.max(0, Math.min(dict["left"] ?? $(el).prop("scrollLeft"), maxScrollX));
-            var speed    = parseFloat(dict["speed"] ?? 0);
-            var easing   = dict["easing"] ?? "swing";
-            var debounce = dict["debounce"] ?? 0;
+            speed    = parseFloat(dict["speed"] ?? 0);
+            easing   = dict["easing"] ?? "swing";
+            debounce = dict["debounce"] ?? 0;
-            var duration  = 1000*Transparent.parseDuration(dict["duration"] ?? 0);
-            var durationX = 1000*Transparent.parseDuration(dict["duration-x"] ?? dict["duration"] ?? 0);
-            var durationY = 1000*Transparent.parseDuration(dict["duration-y"] ?? dict["duration"] ?? 0);
+            duration  = 1000*Transparent.parseDuration(dict["duration"] ?? 0);
+            durationX = 1000*Transparent.parseDuration(dict["duration-x"] ?? dict["duration"] ?? 0);
+            durationY = 1000*Transparent.parseDuration(dict["duration-y"] ?? dict["duration"] ?? 0);
             if(speed) {
-                var distanceX = 0, distanceY = 0;
                 var currentScrollX = $(el)[0].scrollLeft;
                 if(currentScrollX < scrollLeft || scrollLeft == 0) // Going to the right
@@ -1236,7 +1270,6 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             $(this).stop();
         });
-        activeInRemainingTime = activeInRemainingTime - (Date.now() - activeInTime);
         setTimeout(function() {
             // Transfert attributes
@@ -1244,6 +1277,15 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             // Replace head..
             var head = $(dom).find("head");
+            // Snapshot hrefs of already-loaded stylesheets so we can detect new ones
+            // added by the head merge and wait for them to finish loading before
+            // making #page visible (prevents FOUC on cold-cache layout transitions).
+            var _existingStyleHrefs = {};
+            $("head").children("link[rel='stylesheet']").each(function() {
+                var h = this.getAttribute("href"); if(h) _existingStyleHrefs[h] = true;
+            });
             $("head").children().each(function() {
                 var el   = this;
@@ -1252,12 +1294,17 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 head.children().each(function() {
                     found = this.isEqualNode(el);
+                    // Also match identical <style> tags by content
+                    if(!found && el.tagName === 'STYLE' && this.tagName === 'STYLE' &&
+                       el.textContent && this.textContent &&
+                       el.textContent.length > 100 && this.textContent.length === el.textContent.length) {
+                        found = this.textContent === el.textContent;
+                    }
                     return !found;
                 });
                 // Preserve headlocked nodes (dynamically injected widgets, url-matched, etc.)
                 if(!found && Transparent.isHeadlocked(el)) found = true;
                 if(!found) this.remove();
             });
@@ -1269,18 +1316,45 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 $("head").children().each(function() { found |= this.isEqualNode(el); });
                 if(!found) {
-                    if(this.tagName != "SCRIPT" || Settings["global_code"] == true) {
-                        $("head").append(this.cloneNode(true));
+                    if(this.tagName == "SCRIPT" && Settings["global_code"] != true) {
+                        // For inline scripts (without src), create and execute
+                        if(!this.src || this.src === '') {
+                            var script = document.createElement("script");
+                            script.text = this.innerHTML;
+                            var i = -1, attrs = this.attributes, attr;
+                            var N = attrs.length;
+                            while ( ++i < N ) {
+                                if(attrs[i].name !== 'src') {
+                                    script.setAttribute( attrs[i].name, attrs[i].value );
+                                }
+                            }
+                            $("head").append(script);
+                            originalHeadNodes.add(script);
+                        } else {
+                            $("head").append(this);
+                            originalHeadNodes.add(this);
+                        }
                     } else {
-                        $("head").append(this);
+                        var clonedEl = this.cloneNode(true);
+                        $("head").append(clonedEl);
+                        // Register as an "original" node so it falls through to URL-pattern
+                        // matching on future transitions — prevents layout CSS added by
+                        // Transparent itself from being auto-headlocked as third-party content.
+                        originalHeadNodes.add(clonedEl);
                     }
                 }
             });
+            // Collect link[rel="stylesheet"] elements inserted by the head merge above
+            var _newStyleLinks = [];
+            $("head").children("link[rel='stylesheet']").each(function() {
+                var h = this.getAttribute("href");
+                if(h && !_existingStyleHrefs[h]) _newStyleLinks.push(this);
+            });
             var bodyScript = $(dom).find("body > script");
             bodyScript.each(function() {
@@ -1290,10 +1364,27 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 $("body").children().each(function() { found |= this.isEqualNode(el); });
                 if(!found) {
-                    if(this.tagName != "SCRIPT" || Settings["global_code"] == true) {
-                        $("body").append(this.cloneNode(true));
+                    if(this.tagName == "SCRIPT" && Settings["global_code"] != true) {
+                        // For inline scripts (without src), create and execute
+                        if(!this.src || this.src === '') {
+                            var script = document.createElement("script");
+                            script.text = this.innerHTML;
+                            var i = -1, attrs = this.attributes, attr;
+                            var N = attrs.length;
+                            while ( ++i < N ) {
+                                if(attrs[i].name !== 'src') {
+                                    script.setAttribute( attrs[i].name, attrs[i].value );
+                                }
+                            }
+                            $("body").append(script);
+                        } else {
+                            $("body").append(this);
+                        }
                     } else {
-                        $("body").append(this);
+                        $("body").append(this.cloneNode(true));
                     }
                 }
             });
@@ -1336,7 +1427,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 var scrollableElements   = Transparent.getScrollableElement();
                 var scrollableElementsXY = Transparent.getResponsePosition(uuid);
-                for(var i = 0; i < scrollableElements.length; i++) {
+                for(i = 0; i < scrollableElements.length; i++) {
                     var el = scrollableElements[i];
                     var positionXY = undefined;
@@ -1358,20 +1449,43 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                 }
             }
-            $('head').append(function() {
-                $(Settings.identifier).append(function() {
-                        // Callback if needed, or any other actions
-                        callback();
-                        // Trigger onload event
-                        dispatchEvent(new Event('transparent:load'));
-                        dispatchEvent(new Event('load'));
-                });
-            });
+            // Wait for any newly added layout stylesheets to finish loading before
+            // calling callback() / fadeOut() — otherwise #page becomes visible while
+            // the new CSS is still being parsed, causing a flash of unstyled content.
+            (function() {
+                function doCallback() {
+                    $('head').append(function() {
+                        $(Settings.identifier).append(function() {
+                            callback();
+                            dispatchEvent(new Event('transparent:load'));
+                            dispatchEvent(new Event('load'));
+                        });
+                    });
+                }
+                if(_newStyleLinks.length === 0) {
+                    doCallback();
+                } else {
+                    var remaining = _newStyleLinks.length;
+                    var fired = false;
+                    // Safety valve: if a stylesheet fails or stalls, don't block forever.
+                    var guard = setTimeout(function() {
+                        if(!fired) { fired = true; doCallback(); }
+                    }, 3000);
+                    _newStyleLinks.forEach(function(link) {
+                        function onDone() {
+                            if(--remaining <= 0 && !fired) {
+                                fired = true;
+                                clearTimeout(guard);
+                                doCallback();
+                            }
+                        }
+                        link.addEventListener('load',  onDone, {once:true});
+                        link.addEventListener('error', onDone, {once:true});
+                    });
+                }
+            })();
-        }.bind(this), activeInRemainingTime > 0 ? activeInRemainingTime : 1);
+        }.bind(this), 1);
     }
     function uuidv4() {
@@ -1474,7 +1588,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         var elementsXY = [];
         var elements = Transparent.getScrollableElement();
-        for(var i = 0; i < elements.length; i++)
+        for(i = 0; i < elements.length; i++)
             elementsXY.push([$(elements[i]).scrollTop(), $(elements[i]).scrollLeft()]);
         return elementsXY;
@@ -1494,7 +1608,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             return;
         }
-        dispatchEvent(new CustomEvent('transparent:link', {detail: {link: link}}));
+        dispatchEvent(new CustomEvent('transparent:link', {link:link}));
         const uuid   = uuidv4();
         const type   = link[0];
@@ -1506,10 +1620,8 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         // Wait for transparent window event to be triggered
         if (!isReady) return;
-        const $ctx = (e.type === Transparent.state.SUBMIT) ? $(document) : $(this);
-        if (e.type !== Transparent.state.POPSTATE   &&
-            e.type !== Transparent.state.HASHCHANGE &&
-            !$ctx.find(Settings.identifier).length) return;
+        if (e.type != Transparent.state.POPSTATE   &&
+            e.type != Transparent.state.HASHCHANGE && !$(this).find(Settings.identifier).length) return;
         var form   = target != undefined && target.tagName == "FORM" ? target : undefined;
         var formTrigger = undefined;
@@ -1602,41 +1714,59 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         $(Transparent.html).stop();
         Transparent.html.addClass(Transparent.state.LOADING);
-        Transparent.activeIn();
+        var fadeInDone = false;
+        var pendingResponseArgs = null;
+        function tryDispatch(args) {
+            if (args !== undefined) pendingResponseArgs = args;
+            if (fadeInDone && pendingResponseArgs !== null)
+                handleResponse(...pendingResponseArgs);
+        }
+        // Lock navigation for the full transition (fadeIn + page swap + fadeOut).
+        // Released inside Transparent.fadeOut's final cleanup, covering both the
+        // AJAX path and the popstate/cached-response path.
+        ajaxSemaphore = true;
+        Transparent.fadeIn(function() {
+            fadeInDone = true;
+            tryDispatch();
+        });
         function isJsonResponse(str) {
             try { JSON.parse(str); return true; }
             catch (e) { return false; }
         }
-        function handleResponse(uuid, status = 200, method = null, data = null, responseURL = null, contentType = null, fetchedResponseText = null) {
+        function handleResponse(uuid, status = 200, method = null, data = null, xhr = null, request = null) {
-            ajaxSemaphore = false;
-            responseURL = responseURL ?? url.href;
+            var responseURL;
+            responseURL = xhr !== null ? xhr.responseURL : url.href;
-            var responseText  = Transparent.getResponseText(uuid);
+            responseText  = Transparent.getResponseText(uuid);
-            const fragmentPosResp = responseURL.indexOf("#");
-            var strippedResponseUrl = (fragmentPosResp < 0 ? responseURL : responseURL.substring(0, fragmentPosResp)).trimEnd("/");
+            var fragmentPos = responseURL.indexOf("#");
+            var strippedResponseUrl = (fragmentPos < 0 ? responseURL : responseURL.substring(0, fragmentPos)).trimEnd("/");
-            const fragmentPosReq = url.href.indexOf("#");
-            var strippedUrlHref = (fragmentPosReq < 0 ? url.href : url.href.substring(0, fragmentPosReq)).trimEnd("/");
+            var fragmentPos = url.href.indexOf("#");
+            var strippedUrlHref = (fragmentPos < 0 ? url.href : url.href.substring(0, fragmentPos)).trimEnd("/");
             if( strippedUrlHref == strippedResponseUrl )
-                responseURL = url.href; // NB: fetch response.url strips away #fragments
+                responseURL = url.href; // NB: xhr.responseURL strips away #fragments
             if(!responseText) {
-                if(!fetchedResponseText && responseText === null) {
+                if(!request && responseText === null) {
                     setTimeout(function() { window.location.href = responseURL; }, Settings["throttle"]);
                     return;
                 }
-                responseText = fetchedResponseText;
+                responseText = request.responseText;
                 if(status >= 500) {
-                    console.error("Unexpected response from "+uuid+": error code "+status);
+                    console.error("Unexpected XHR response from "+uuid+": error code "+request.status);
                     console.error(sessionStorage);
                 }
@@ -1645,7 +1775,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             }
             var dom = new DOMParser().parseFromString(responseText, "text/html");
-            if(contentType && contentType.includes("application/json")) {
+            if(request && request.getResponseHeader("Content-Type") == "application/json") {
                 if(!isJsonResponse(responseText)) {
                     console.error("Invalid response received for "+ responseURL);
@@ -1667,11 +1797,12 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     else location.reload();
                 }
+                ajaxSemaphore = false;
                 return dispatchEvent(new Event('load'));
             }
             // Invalid html page returned
-            if(contentType && contentType.includes("text/html")) {
+            if(request && request.getResponseHeader("Content-Type") == "text/html") {
                 if (!responseText.includes("<html") && !responseText.includes("<body") && !responseText.includes("<head"))
                     return Transparent.rescue(dom);
@@ -1690,7 +1821,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             // From here the page is valid..
             // so the new page is added to history..
-            if(fetchedResponseText !== null)
+            if(xhr)
                 history.pushState({uuid: uuid, status:status, method: method, data: {}, href: responseURL}, '', responseURL);
             // Page not recognized.. just go fetch by yourself.. no POST information transmitted..
@@ -1734,9 +1865,28 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             if($(dom).find("html").hasClass(Transparent.state.RELOAD) || $(dom).find("html").hasClass(Transparent.state.DISABLE))
                 return window.location.reload();
+            // Kick off preloads for stylesheets the new page needs but aren't yet in <head>.
+            // They download in parallel during the fadeIn animation so onLoad() finds them
+            // already cached — eliminating FOUC on cold-cache layout transitions.
+            (function() {
+                var loaded = {};
+                $("head").children("link[rel='stylesheet']").each(function() {
+                    var h = this.getAttribute("href"); if(h) loaded[h] = true;
+                });
+                $(dom).find("head").children("link[rel='stylesheet']").each(function() {
+                    var h = this.getAttribute("href");
+                    if(!h || loaded[h]) return;
+                    if($("head").find("link[rel='preload'][href='" + h.replace(/'/g, "\\'") + "']").length) return;
+                    var pl = document.createElement("link");
+                    pl.rel = "preload"; pl.as = "style"; pl.href = h;
+                    document.head.appendChild(pl);
+                });
+            })();
             return Transparent.onLoad(uuid, dom, function() {
-                Transparent.activeOut(function() {
+                Transparent.fadeOut(function() {
                     Transparent.html
                         .removeClass(switchLayout)
@@ -1759,27 +1909,26 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             if(history.state)
                 Transparent.setResponse(history.state.uuid, Transparent.html[0], Transparent.getScrollableElementXY());
-            $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in activeIn callback)
+            $(Transparent.html).prop("user-scroll", false); // make sure to avoid page jump during transition (cancelled in fadeIn callback)
             // Submit ajax request..
-            ajaxSemaphore = true; // Raise before dispatching synthetic submit to prevent double-submission
             if(form) form.dispatchEvent(new SubmitEvent("submit", { submitter: formTrigger }));
-            return fetch(url.href, {
-                method: type,
-                body: type === "GET" ? undefined : data,
-                headers: Settings["headers"] || {}
-            })
-            .then(async (response) => {
-                const responseText = await response.text();
-                return handleResponse(uuid, response.status, type, data, response.url, response.headers.get("Content-Type"), responseText);
-            })
-            .catch(() => {
-                handleResponse(uuid, 500, type, data, url.href, null, null);
+            var xhr = new XMLHttpRequest();
+            return jQuery.ajax({
+                url: url.href,
+                type: type,
+                data: data,
+                contentType: false,
+                processData: false,
+                headers: Settings["headers"] || {},
+                xhr: function () { return xhr; },
+                success: function (html, status, request) { return tryDispatch([uuid, request.status, type, data, xhr, request]); },
+                error:   function (request, ajaxOptions, thrownError) { return tryDispatch([uuid, request.status, type, data, xhr, request]); }
             });
         }
-        return handleResponse(history.state.uuid, history.state.status, history.state.method, history.state.data);
+        return tryDispatch([history.state.uuid, history.state.status, history.state.method, history.state.data]);
     }
     // Update history if not refreshing page or different page (avoid double pushState)
@@ -1795,8 +1944,8 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         if(Settings.debug) console.debug("Transparent is disabled..");
-        const statesSet = new Set(Object.values(Transparent.state));
-        const htmlClass = ($("html").attr("class") || "").split(" ").filter(x => !statesSet.has(x));
+        var states    = Object.values(Transparent.state);
+        var htmlClass = Array.from(($("html").attr("class") || "").split(" ")).filter(x => !states.includes(x));
         Transparent.html.removeClass(states).addClass(htmlClass.join(" ")+" "+Transparent.state.ROOT+" "+Transparent.state.READY+" "+Transparent.state.DISABLE);
     } else {
@@ -1882,7 +2031,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
                     var fieldValueBefore = formDataBefore[fieldName];
                     if(fieldValueBefore instanceof File) {
-                        if(!(fieldValueAfter instanceof File)) preventDefault = true;
+                        if(!fieldValueAfter instanceof File) preventDefault = true;
                         else if (fieldValueBefore.size != fieldValueAfter.size) preventDefault = true;
                     } else if(fieldValueBefore != fieldValueAfter) {
@@ -1894,7 +2043,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
             if(Settings.debug || preventDefault) {
                 if(preventDefault) Transparent.html.addClass(Transparent.state.READY);
-                if(preventDefault) Transparent.activeOut();
+                if(preventDefault) Transparent.fadeOut();
                 if(preventDefault) dispatchEvent(new Event('load'));
                 return "Dude, are you sure you want to leave? Think of the kittens!";
@@ -1903,7 +2052,7 @@ jQuery.event.special.mousewheel = { setup: function( _, ns, handle ) { this.addE
         document.addEventListener('click', __main__, false);
-        $(document).on("submit", "form", __main__);
+        $("form").on("submit", __main__);
     }