Images aren't loading on iOS devices about yall.js

[kalled]

@malchata, here ya go.

Native:
Windows,10, Internet Explorer 11

BrowserStack:
IPHONE X, iOS, v11, Safari
IPHONE 7, iOS, v10, Safari
Windows, 8.1, Firefox 51.0
Windows, 10, Chrome, 50

It seems that the resize event gets trigger on the iOS devices when in landscape mode which loads the image.

Initialization
document.addEventListener("DOMContentLoaded", function () { yall(); });

Public url
http://yall.now.sh/

I hope this helps! :)

[malchata]

Thank you so much for this, @kalled. I know it was a bit of pain to get this off Codepen, but it makes troubleshooting much easier.

I'm able to repro in Safari on macOS, even. I'll dig around and see what the issue is. This is immensely helpful.

[malchata]

Hi, @kalled.

I finally managed to get to this, and I think I have a fix. Do you want to try out the latest version in the dist folder to see if it all works? Hoping we can tie this one up.

[malchata]

Hi, @kalled. Thanks for your note!

I've not observed this behavior on iOS in any browser, either in places I've used it, or in this Codepen example. But I don't doubt that you're having issues. Is this Codepen the only place you're having trouble with it, or are you having issues with it in development at the moment? If possible, please let me know what your platform version is.

[kalled]

@malchata, thanks for your quick reply.

I have the same problem running the test suite (moving the content to the top) and on two other sites, also running the CodePen example above in regular and debug mode. I have also tried all of the above via BrowserStack with the same result.

Maybe it is just my phone, none of my colleagues seem to have this issue. Actually I just tried the CodePen on my friends phone, running iOS 11.3.1, same as I using and it works.

This is driving my crazy.

[malchata]

Do you have any accessibility settings enabled on your iPhone that you can think of? It's all I can really think of at this point. :\

[kalled]

Ah yea, good point. I also thought about the accessibility settings. I've been using the triple-tap zoom hack to toggle the brightness of the device but everything has been turned off. Maybe I should just reset all settings and see what happens (a little bit to scared to do that though :) ).

Running the the example above in debug mode on CodePen via BrowserStack (iOS xxx, Safari, Chrome) will show the problem. In order to test that you need to have account on both sites and also for the Pen to access debug mode. Doing so It's likely to take it all a bit too far. :)

Thanks again.

[kalled]

@malchata, hello again.

May I ask which event should call the yallBack function when the browser doesn't support Intersection Observer? From what I can see yallBack only gets called when the browser scrollY position is greater 0 via the scroll event. I experience this issue in the following browsers – Chrome, Firefox, IE11 that doesn't support Intersection. Any ideas?

https://codepen.io/kalled/pen/KROYOB?editors=1010

[malchata]

yallBack should never be called if IntesectionObserver is present, because IntersectionObserver does not rely on events. It simply observes the viewport and handles element detection for us without the need for any event handlers. yallBack is only used if IntersectionObserver is not supported.

[malchata]

Just a quick thought: Try the minified build in the dist directory in your pen and see if that works. The source is not transpiled to work everywhere, and some language features may not work in the browsers you're testing in. Just a thought.

[kalled]

Ah sorry, that was what I meant even though I was indistinct. :) If IntersectionObserver is not supported and when one of the following events are triggered: scroll, touchmove, resize and orientationchange – yallBack gets called. From what I can tell none of the above events gets triggered.

I have also tried the minified version yall-2.0.1.min with no luck. Isn't that the version where you added env.acceptedDataAttributes?

acceptedDataAttributes: [
      "data-src",
      "data-sizes",
      "data-media",
      "data-srcset"
    ]

for (let dataAttribute in element.dataset) {
  if (env.acceptedDataAttributes.indexOf(dataAttribute) !== -1) {
    element.setAttribute(dataAttribute, element.dataset[dataAttribute]);
    element.removeAttribute(`data-${dataAttribute}`);
  }
}

Does the if statement ever evaluate to true?

[malchata]

Let's not address env.acceptedDataAttributes at this time, as I'm not sure it has anything to do with the problem you're having. Let's stick to the 2.0.0 release and see if we can troubleshoot what's going on there.

I am receiving an error in Codepen now in iOS in Browser Stack, but it's not clear if it's due to my code or something that Codepen is doing. I want to fix this issue, but I'm having difficulty understanding where it's originating from, and if we can reliably reproduce it. To take this issue further, please do the following:

1. Move your example off of Codepen to another public server.
2. Give me the full platform details of the environment you're using in BrowserStack, including OS version, browser and browser version. If you have any accessibility features or helpers enabled, please note them, and disable them to see if the issue resolves.
3. Provide any specific error messages you're receiving (if applicable).
4. Provide all initialization options you use when you call the library.
5. Hit me with the URL of the hosted example.

Let me know when you've done this.

[kalled]

Actually, getting it off from CodePen to Now is just one command. I should have done that straight away, it would probably have saved me a couple of hours. :)

Let me know if I can help in anyway.

[kalled]

@malchata, awesome, works like a charm.
And you also fixed the other issue with the acceptedDataAttributes. 👍

Thanks man!

https://yall-atf.now.sh/

[malchata]

No worries. Thanks for bearing with me on this.

I need to do broader testing before I do a 2.0.1 release, though. So for now, use the copy in the dist folder with caution, and open new tickets if new bugs come up.