hexo-theme-linen 1.0.37 → 1.0.38

package/layout/post.ejs

@@ -289,6 +289,15 @@ const seriesInfo = getSeriesInfo(page?.series);
       return viewportSize.x < 700 ? smallScreenPadding : largeScreenPadding
     },
   });
+  const isSafari = !!(navigator.vendor && navigator.vendor.match(/apple/i));
+  lightbox.on('lazyLoadSlide', (event) => {
+    const imageSrc = event.itemData && event.itemData.src;
+    if (isSafari && imageSrc && imageSrc.includes('/hdr/')) {
+      // Let PhotoSwipe's main Content create and reuse its placeholder image.
+      // The bundled Lightbox preloader uses a separate, older Content class.
+      event.preventDefault();
+    }
+  });
 
   const getExif = (element) => {
     const exifString = (element && element.dataset && element.dataset.pspwExif) || '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-linen",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "description": "A clean Hexo theme",
   "main": "index.js",
   "homepage": "https://github.com/lynanbreeze/hexo-theme-linen",

package/source/linen-theme/js/photoswipe/photoswipe.esm.min.js

@@ -170,6 +170,17 @@ function decodeImage(img) {
   });
 }
 
+function areImageSourcesEqual(first, second) {
+  if (!first || !second) {
+    return false;
+  }
+  try {
+    return new URL(first, document.baseURI).href === new URL(second, document.baseURI).href;
+  } catch (error) {
+    return first === second;
+  }
+}
+
 /** @typedef {LOAD_STATE[keyof LOAD_STATE]} LoadState */
 /** @type {{ IDLE: 'idle'; LOADING: 'loading'; LOADED: 'loaded'; ERROR: 'error' }} */
 const LOAD_STATE = {
@@ -4574,13 +4585,43 @@ class Content {
     ) {
       return;
     }
-    const imageElement = /** @type HTMLImageElement */ this.element;
+    let imageElement = /** @type HTMLImageElement */ this.element;
+    let reusingPlaceholder = false;
+    const isHdrImage = this.data.src && this.data.src.includes("/hdr/");
+    const placeholderElement = this.placeholder && this.placeholder.element;
+    // Safari can flash when it swaps between two separate image layers,
+    // even when the placeholder and the full-size HDR image use the same URL.
+    // Reuse the placeholder so HDR is never decoded through HTMLImageElement.decode().
+    if (
+      isSafari() &&
+      isHdrImage &&
+      !this.data.srcset &&
+      placeholderElement &&
+      placeholderElement.tagName === "IMG" &&
+      areImageSourcesEqual(placeholderElement.src, this.data.src)
+    ) {
+      imageElement = /** @type HTMLImageElement */ placeholderElement;
+      imageElement.classList.remove("pswp__img--placeholder");
+      imageElement.removeAttribute("aria-hidden");
+      imageElement.removeAttribute("role");
+      imageElement.style.width = "";
+      imageElement.style.height = "";
+      imageElement.style.transform = "";
+      imageElement.style.transformOrigin = "";
+      setWidthHeight(imageElement, this.displayedImageWidth, this.displayedImageHeight);
+      this.element = imageElement;
+      this.placeholder.element = null;
+      this.placeholder = undefined;
+      reusingPlaceholder = true;
+    }
     this.updateSrcsetSizes();
-    if (this.data.srcset) {
+    if (this.data.srcset && !reusingPlaceholder) {
       imageElement.srcset = this.data.srcset;
     }
-    imageElement.src =
-      (_this$data$src = this.data.src) !== null && _this$data$src !== void 0 ? _this$data$src : "";
+    if (!reusingPlaceholder) {
+      imageElement.src =
+        (_this$data$src = this.data.src) !== null && _this$data$src !== void 0 ? _this$data$src : "";
+    }
     imageElement.alt =
       (_this$data$alt = this.data.alt) !== null && _this$data$alt !== void 0 ? _this$data$alt : "";
     this.state = LOAD_STATE.LOADING;