From 92edb3d835f5f213a314caa3bec0b99699db94b2 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 3 Dec 2018 23:08:38 -0800
Subject: [PATCH] fix(firefox): fix firefox with blocked images (#718)

* fix(firefox): fix firefox with blocked images

* remove excessive perf marks

* fixup

* fix lint
---
 routes/_components/LazyImage.html      |  5 +----
 routes/_components/NonAutoplayImg.html | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/routes/_components/LazyImage.html b/routes/_components/LazyImage.html
index 2f71d5f..1c818fe 100644
--- a/routes/_components/LazyImage.html
+++ b/routes/_components/LazyImage.html
@@ -16,18 +16,15 @@
   }
 </style>
 <script>
-  import { mark, stop } from '../_utils/marks'
   import { decodeImage } from '../_utils/decodeImage'
 
   export default {
     async oncreate () {
-      mark('LazyImage oncreate()')
       try {
         await decodeImage(this.refs.node)
       } catch (e) {
         this.set({ error: true })
       }
-      stop('LazyImage oncreate()')
     },
     data: () => ({
       error: false,
@@ -51,4 +48,4 @@
       displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/routes/_components/NonAutoplayImg.html b/routes/_components/NonAutoplayImg.html
index a9866ee..58e461d 100644
--- a/routes/_components/NonAutoplayImg.html
+++ b/routes/_components/NonAutoplayImg.html
@@ -21,11 +21,16 @@
   import { mouseover } from '../_utils/events'
   import { decodeImage } from '../_utils/decodeImage'
   import { classname } from '../_utils/classname'
+  import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
 
   export default {
     async oncreate () {
+      let { currentSrc } = this.get()
       try {
-        await decodeImage(this.refs.node)
+        let image = new Image()
+        image.src = currentSrc
+        await decodeImage(image)
+        this.set({ loaded: true })
         this.fire('imgLoad')
       } catch (e) {
         this.fire('imgLoadError', e)
@@ -42,7 +47,8 @@
     data: () => ({
       alt: '',
       title: '',
-      mouseOver: false
+      mouseOver: false,
+      loaded: false
     }),
     computed: {
       computedClass: ({ className, src, staticSrc, isLink }) => (classname(
@@ -50,7 +56,9 @@
         src !== staticSrc && 'non-autoplay-zoom-in',
         isLink && 'is-link'
       )),
-      displaySrc: ({ src, staticSrc, mouseOver }) => (mouseOver ? src : staticSrc)
+      currentSrc: ({ mouseOver, src, staticSrc }) => mouseOver ? src : staticSrc,
+      // using a transparent pixel as placeholder ensures broken images don't have wrong sizes
+      displaySrc: ({ loaded, currentSrc }) => loaded ? currentSrc : ONE_TRANSPARENT_PIXEL
     }
   }
-</script>
\ No newline at end of file
+</script>