www.ikea.com - design is broken #113635

karlcow · 2022-11-07T23:39:24Z

URL: https://www.ikea.com/us/en/home-design/

Browser / Version: Firefox 108.0
Operating System: Mac OS X 10.15
Tested Another Browser: Yes Safari

Problem type: Design is broken
Description: Images not loaded
Steps to Reproduce:

Go to https://www.ikea.com/us/en/home-design/
Block location
Allow cookies
Refresh if images are loaded, until you get a version without images. (Maybe 2 or 3 reloads)

Expected:
Images visible

Actual:
Some images are missing.

Notes:
This happens in Firefox NIghtly and Safari Tech Preview but not able to reproduce in Chrome Canary.

View the screenshot

Browser Configuration

None

From webcompat.com with ❤️

karlcow · 2022-11-07T23:44:30Z

This is the code when the image is not being loaded.

<div class="dl-card__image">
  <span
    class="dl-aspect-ratio-image dl-aspect-ratio-image--wide dl-card__image-aspect-ratio"
    ><div
      data-gatsby-image-wrapper=""
      class="gatsby-image-wrapper gatsby-image-wrapper-constrained"
      suppresshydrationwarning="true"
    >
      <div style="max-width: 1000px; display: block">
        <img
          alt=""
          role="presentation"
          aria-hidden="true"
          src="data:image/svg+xml;charset=utf-8,%3Csvg height='718' width='1000' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E"
          style="max-width: 100%; display: block; position: static"
        />
      </div></div
  ></span>
</div>

And this is the code when the image is being loaded.

<div class="dl-card__image">
  <span
    class="dl-aspect-ratio-image dl-aspect-ratio-image--wide dl-card__image-aspect-ratio"
    ><div
      data-gatsby-image-wrapper=""
      class="gatsby-image-wrapper gatsby-image-wrapper-constrained"
      suppresshydrationwarning="true"
    >
      <div style="max-width: 1000px; display: block">
        <img
          alt=""
          role="presentation"
          aria-hidden="true"
          src="data:image/svg+xml;charset=utf-8,%3Csvg height='718' width='1000' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E"
          style="max-width: 100%; display: block; position: static"
        />
      </div>
      <img
        aria-hidden="true"
        data-placeholder-image=""
        style="opacity: 0; transition: opacity 500ms linear; object-fit: cover"
        decoding="async"
        src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABqbxrJdiQ/8QAGRABAQEBAQEAAAAAAAAAAAAAAQIREhMh/9oACAEBAAEFAs6eflYJTL6K0zv/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAEAAgMBAAAAAAAAAAAAAAAAASERMUKh/9oACAEBAAY/AqlhtUr8dP/EABoQAAMBAAMAAAAAAAAAAAAAAAABESFhcYH/2gAIAQEAAT8hl0yVfsSAM2TFQv0NW3vlH//aAAwDAQACAAMAAAAQ2C//xAAWEQEBAQAAAAAAAAAAAAAAAAAAETH/2gAIAQMBAT8Q1X//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8QcLC//8QAGxABAAIDAQEAAAAAAAAAAAAAAQARITFhQfD/2gAIAQEAAT8QriGt7zFAzDRvr5EKNnIdIFZuMq1hbk10jp9y+if/2Q=="
        alt=""
      /><picture
        ><source
          type="image/webp"
          srcset="
            /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/52dbe/showroom-1.webp  250w,
            /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/85d7d/showroom-1.webp  500w,
            /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/b4d58/showroom-1.webp 1000w
          "
          sizes="(min-width: 1000px) 1000px, 100vw" />
        <img
          data-main-image=""
          style="object-fit: cover; opacity: 1"
          sizes="(min-width: 1000px) 1000px, 100vw"
          decoding="async"
          loading="eager"
          src="/us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/41a63/showroom-1.jpg"
          srcset="
            /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/87461/showroom-1.jpg  250w,
            /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/1f3b1/showroom-1.jpg  500w,
            /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/41a63/showroom-1.jpg 1000w
          "
          alt=""
          width="1000"
          height="718" /></picture
      ><noscript></noscript></div
  ></span>
</div>

karlcow · 2022-11-07T23:55:28Z

I suspect a glitch in native image lazy loading.
webpack://design-lab-frontend/src/components/hooks.ts

and also webpack://design-lab-frontend/src/components/gatsby-image.browser.tsx

    // The plugin image component is a bit special where if it's server-side rendered, we add extra script tags to support lazy-loading without
    // In this case we stop hydration but fire the correct events.
    const ssrImage = root.current.querySelector(
      `[data-gatsby-image-ssr]`
    ) as HTMLImageElement
    if (ssrImage && hasNativeLazyLoadSupport()) {
      if (ssrImage.complete) {
        // Trigger onStartload and onLoad events
        onStartLoad?.({
          wasCached: true,
        })
        onLoad?.({
          wasCached: true,
        })

        // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
        setTimeout(() => {
          ssrImage.removeAttribute(`data-gatsby-image-ssr`)
        }, 0)
      } else {
        onStartLoad?.({
          wasCached: true,
        })

        ssrImage.addEventListener(`load`, function onLoadListener() {
          ssrImage.removeEventListener(`load`, onLoadListener)

          onLoad?.({
            wasCached: true,
          })
          // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
          setTimeout(() => {
            ssrImage.removeAttribute(`data-gatsby-image-ssr`)
          }, 0)
        })
      }

      imageCache.add(cacheKey)

      return
    }

    if (renderImage && imageCache.has(cacheKey)) {
      return
    }

karlcow · 2022-11-07T23:58:34Z

@ksy36 @denschub what do you think?

karlcow · 2022-11-08T00:01:32Z

It looks very similar to gatsbyjs/gatsby#35628

karlcow · 2022-11-08T00:15:56Z

In Safari technical preview, deactivating lazy loading makes the site slower, but the images load every time.

karlcow · 2022-11-08T00:16:16Z

This is probably outreach to ikea.

robinwhittleton · 2022-11-08T13:30:00Z

I’ll pick this up and bring it to the appropriate team.

sv-calin · 2022-11-09T08:58:40Z

Thanks for the report, Karl. The images do not load on every refresh.

I was not able to reproduce the issue on Safari. (5/5 tries)

Tested on:
• Browser / Version: Firefox Nightly 108.0a1 (2022-11-08) / Firefox Release 106.0.5 / Chrome 107.0.5304.110 / Safari 16.1 (18614.2.9.1.12)
• Operating System: Mac OS X 10.15

Notes:

Reproducible on both Firefox Release and Nightly
Not reproducible on Chrome

Moving to Needsdiagnosis.

[qa_45/2022]

robinwhittleton · 2022-11-09T14:36:05Z

So this page is currently going through a redevelopment which should resolve this, but in the event that the component continues to be used they’ll work to fix this now that they know the issue.

Thanks for highlighting the problem @karlcow, and I’ll keep an eye on it.

denschub · 2022-11-09T20:20:14Z

@robinwhittleton just for the record, y'all shipping sourcemaps into production is so much appreciated. ❤️ it makes our work of diagnosing web-compat issues soooooo much easier. :)

If you run into any browser specific issues, please report them on webcompat.com, and we'll take a look at it!

For now, I'll move this issue into sitewait, as there is nothing for us to do here.

karlcow · 2022-11-09T23:12:19Z

it makes our work of diagnosing web-compat issues soooooo much easier. :)

This!

Thanks a lot.

karlcow · 2022-11-09T23:14:21Z

Tracked at Apple with rdar://101657305

brentfulgham · 2022-11-14T18:17:08Z

How will we know when Ikea pushes a fix for this? Do we just need to check the site periodically, or will someone notify us here?

robinwhittleton · 2022-11-14T18:44:59Z

I’m at IKEA, so you can poke me. But I’m not in the team that owns this, and I have no update on timing at the moment.

karlcow · 2022-11-16T03:18:20Z

When it succeeds the image being displayed by Safari is:

<picture
  ><source
    type="image/webp"
    srcset="
      /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/52dbe/showroom-1.webp  250w,
      /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/85d7d/showroom-1.webp  500w,
      /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/b4d58/showroom-1.webp 1000w
    "
    sizes="(min-width: 1000px) 1000px, 100vw" />
  <img
    data-gatsby-image-ssr=""
    data-main-image=""
    style="opacity: 1"
    sizes="(min-width: 1000px) 1000px, 100vw"
    decoding="async"
    loading="eager"
    src="/us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/41a63/showroom-1.jpg"
    srcset="
      /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/87461/showroom-1.jpg  250w,
      /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/1f3b1/showroom-1.jpg  500w,
      /us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/41a63/showroom-1.jpg 1000w
    "
    alt=""
/></picture>

https://www.ikea.com/us/en/home-design/static/977d4773fdd6e9c4a336afb08f13682f/b4d58/showroom-1.webp

BUT my impression is that images are always loaded, but then the DOM is being rewritten.

When we deactivate lazy loading, it's always working. which means it never goes through this code which is in the HTML source, where I replaced: t by hasNativeLazyLoadingSupport to make it clearer.

const hasNativeLazyLoadingSupport =
  "undefined" != typeof HTMLImageElement &&
  "loading" in HTMLImageElement.prototype;
if (hasNativeLazyLoadingSupport) {
  const t = document.querySelectorAll("img[data-main-image]");
  for (let e of t) {
    e.dataset.src &&
      (e.setAttribute("src", e.dataset.src), e.removeAttribute("data-src")),
      e.dataset.srcset &&
        (e.setAttribute("srcset", e.dataset.srcset),
        e.removeAttribute("data-srcset"));
    const t = e.parentNode.querySelectorAll("source[data-srcset]");
    for (let e of t)
      e.setAttribute("srcset", e.dataset.srcset),
        e.removeAttribute("data-srcset");
    e.complete &&
      ((e.style.opacity = 1),
      (e.parentNode.parentNode.querySelector(
        "[data-placeholder-image]"
      ).style.opacity = 0));
  }
}

This script seems to be repeated as much as they are images in the document.

There is another similar script in the head of the document.

const e =
  "undefined" != typeof HTMLImageElement &&
  "loading" in HTMLImageElement.prototype;
e &&
  document.body.addEventListener(
    "load",
    function (e) {
      const t = e.target;
      if (void 0 === t.dataset.mainImage) return;
      if (void 0 === t.dataset.gatsbyImageSsr) return;
      let a = null,
        n = t;
      for (; null === a && n; )
        void 0 !== n.parentNode.dataset.gatsbyImageWrapper &&
          (a = n.parentNode),
          (n = n.parentNode);
      const o = a.querySelector("[data-placeholder-image]"),
        r = new Image();
      (r.src = t.currentSrc),
        r
          .decode()
          .catch(() => {})
          .then(() => {
            (t.style.opacity = 1),
              o &&
                ((o.style.opacity = 0),
                (o.style.transition = "opacity 500ms linear"));
          });
    },
    !0
  );

all these scripts are wrapped into

<script type="module"></script>

There are 18 instances of them.

The one in the head is the one called a lot. Around ~160 times

There is something looking like a race issue in all of these.

karlcow · 2022-11-16T06:22:54Z

Removing all the individual scripts module for each image with a local override in Web Inspector dev tools in Safari doesn't fix the issue. So There is something else going on.

karlcow · 2022-11-16T12:24:35Z

The last piece of code checking for Lazy Loading is:

              const e = k.current.querySelector("[data-gatsby-image-ssr]");
              if (e && l())
                return (
                    e.complete
                    ? (null == g ||
                        g({
                          wasCached: !0,
                        }),
                      null == h ||
                        h({
                          wasCached: !0,
                        }),
                      setTimeout(() => {
                        e.removeAttribute("data-gatsby-image-ssr");
                      }, 0))
                    : (null == g ||
                        g({
                          wasCached: !0,
                        }),
                      e.addEventListener("load", function t() {
                        e.removeEventListener("load", t),
                          null == h ||
                            h({
                              wasCached: !0,
                            }),
                          setTimeout(() => {
                            e.removeAttribute("data-gatsby-image-ssr");
                          }, 0);
                      })),
                  void I.add(C)
                );

which is in fact

https://github.com/gatsbyjs/gatsby/blob/3dfc1ec1c03a962bfdcf3db6ec200883d612d3ad/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx#L110-L145

    const ssrImage = root.current.querySelector(
      `[data-gatsby-image-ssr]`
    ) as HTMLImageElement
    if (ssrImage && hasNativeLazyLoadSupport()) {
      if (ssrImage.complete) {
        // Trigger onStartload and onLoad events
        onStartLoad?.({
          wasCached: true,
        })
        onLoad?.({
          wasCached: true,
        })

        // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
        setTimeout(() => {
          ssrImage.removeAttribute(`data-gatsby-image-ssr`)
        }, 0)
      } else {
        onStartLoad?.({
          wasCached: true,
        })

        ssrImage.addEventListener(`load`, function onLoadListener() {
          ssrImage.removeEventListener(`load`, onLoadListener)

          onLoad?.({
            wasCached: true,
          })
          // remove ssr key for state updates but add delay to not fight with native code snippt of gatsby-ssr
          setTimeout(() => {
            ssrImage.removeAttribute(`data-gatsby-image-ssr`)
          }, 0)
        })
      }

      imageCache.add(cacheKey)

      return
    }

Also:
https://github.com/gatsbyjs/gatsby/blob/9a912956a5ea66be7281f6263928b64f20ff1d53/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx#L57

Gatsby 4.24.1 is used. Current Gatsby is 5.0

I need to dig a bit more there

karlcow · 2022-11-17T04:31:54Z

ok I'm 100% sure now that the issue is happening in this part of the code that the issue is.

@robinwhittleton

                    const e = k.current.querySelector("[data-gatsby-image-ssr]");
                    if (e && l())
                        return e.complete ? (null == g || g({
                            wasCached: !0
                        }), null == h || h({
                            wasCached: !0
                        }), setTimeout((() => {
                            e.removeAttribute("data-gatsby-image-ssr")
                        }), 0)) : (null == g || g({
                            wasCached: !0
                        }), e.addEventListener("load", (function t() {
                            e.removeEventListener("load", t),
                            null == h || h({
                                wasCached: !0
                            }),
                            setTimeout((() => {
                                e.removeAttribute("data-gatsby-image-ssr")
                            }), 0)
                        }))), void I.add(C);

If I just change

                    if (e && l())

by

                    if (e && false)

so that it is never executed. The images are always displayed.

Modifying the code a bit to better understand.

const e = k.current.querySelector("[data-gatsby-image-ssr]");
const wasCachedTrue = { wasCached: !0 };
if (e && l()) {
  if (e.complete) {
    console.log("e.complete OK");
    null == g || g(wasCachedTrue),
      null == h || h(wasCachedTrue),
      setTimeout(() => {
        e.removeAttribute("data-gatsby-image-ssr");
      }, 0);
  } else {
    console.log("e.complete NOT OK");
    null == g || g(wasCachedTrue),
      e.addEventListener("load", function t() {
        e.removeEventListener("load", t),
          null == h || h(wasCachedTrue),
          setTimeout(() => {
            e.removeAttribute("data-gatsby-image-ssr");
          }, 0);
      });
  }
  void I.add(C);
}

Each time the images are NOT displayed is when we reach the second part of the condition aka when HTMLImageElement.complete is false.
So basically when the image has not finished being loaded.

karlcow · 2022-11-17T04:56:54Z

https://github.com/gatsbyjs/gatsby/blob/aca64b78a4d158ec6dec700f4bf5a93a993dea5a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx#LL124C9-L140C8

This part of the code was touched by

Issue: GatsbyImage's "onLoad" prop does not always trigger when image is not cached gatsbyjs/gatsby#36373
PR: https://github.com/gatsbyjs/gatsby/pull/36375/files

And the code was added here in

karlcow · 2023-02-14T08:23:36Z

@robinwhittleton This is still happening.

Steps to reproduce

Open Safari Tech Preview 163
Go to Develop Menu and select Disable Site Specific Hacks
Go to https://www.ikea.com/us/en/home-design/
(Images are loading)
Then reload

Expected:
Images here.

Actual:
Images are not visible.

robinwhittleton · 2023-04-18T11:52:19Z

The rebuild on this page has (I believe) happened, and I can’t replicate the issue any more in either Firefox or Safari TP.

denschub · 2023-04-18T12:46:36Z

Indeed, images seem to load fine now. Thank you so much. <3

karlcow · 2023-05-15T23:29:53Z

I will test without the Quirks for Safari
https://github.com/WebKit/WebKit/blob/d565c2070f7adafe2511904b6a3a27f3d93396d2/Source/WebCore/page/Quirks.cpp#L1526-L1551

karlcow · 2023-05-19T03:36:38Z

This is working for me too. I will remove the Quirk.

webcompat-bot added this to the needstriage milestone Nov 7, 2022

webcompat-bot added browser-firefox engine-gecko The browser uses the Gecko rendering engine priority-important labels Nov 7, 2022

karlcow added browser-safari type-image Issues with specific images rendering differently (the server is sending the same image to each UA). and removed priority-important labels Nov 7, 2022

sv-calin added the os-mac Issues only happening on macOS. label Nov 8, 2022

sv-calin modified the milestones: needstriage, needsdiagnosis Nov 9, 2022

denschub modified the milestones: needsdiagnosis, sitewait Nov 9, 2022

ksy36 mentioned this issue Apr 12, 2023

officeplanner.ikea.com - Page is stuck in a loading state after proceeding to the next step #119112

Open

denschub closed this as completed Apr 18, 2023

denschub modified the milestones: sitewait, fixed Apr 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

www.ikea.com - design is broken #113635

www.ikea.com - design is broken #113635

karlcow commented Nov 7, 2022

karlcow commented Nov 7, 2022

karlcow commented Nov 7, 2022

karlcow commented Nov 7, 2022

karlcow commented Nov 8, 2022

karlcow commented Nov 8, 2022

karlcow commented Nov 8, 2022

robinwhittleton commented Nov 8, 2022

sv-calin commented Nov 9, 2022 •

edited

robinwhittleton commented Nov 9, 2022

denschub commented Nov 9, 2022

karlcow commented Nov 9, 2022

karlcow commented Nov 9, 2022 •

edited

brentfulgham commented Nov 14, 2022

robinwhittleton commented Nov 14, 2022

karlcow commented Nov 16, 2022

karlcow commented Nov 16, 2022

karlcow commented Nov 16, 2022

karlcow commented Nov 17, 2022

karlcow commented Nov 17, 2022

karlcow commented Feb 14, 2023

robinwhittleton commented Apr 18, 2023

denschub commented Apr 18, 2023

karlcow commented May 15, 2023

karlcow commented May 19, 2023

www.ikea.com - design is broken #113635

www.ikea.com - design is broken #113635

Comments

karlcow commented Nov 7, 2022

karlcow commented Nov 7, 2022

karlcow commented Nov 7, 2022

karlcow commented Nov 7, 2022

karlcow commented Nov 8, 2022

karlcow commented Nov 8, 2022

karlcow commented Nov 8, 2022

robinwhittleton commented Nov 8, 2022

sv-calin commented Nov 9, 2022 • edited

robinwhittleton commented Nov 9, 2022

denschub commented Nov 9, 2022

karlcow commented Nov 9, 2022

karlcow commented Nov 9, 2022 • edited

brentfulgham commented Nov 14, 2022

robinwhittleton commented Nov 14, 2022

karlcow commented Nov 16, 2022

karlcow commented Nov 16, 2022

karlcow commented Nov 16, 2022

karlcow commented Nov 17, 2022

karlcow commented Nov 17, 2022

karlcow commented Feb 14, 2023

robinwhittleton commented Apr 18, 2023

denschub commented Apr 18, 2023

karlcow commented May 15, 2023

karlcow commented May 19, 2023

sv-calin commented Nov 9, 2022 •

edited

karlcow commented Nov 9, 2022 •

edited