0

I have a block of JavaScript written with some ES6 that transpiles down with Babel. What the code is looking to do is check to see whenever a section scrolls into view, at which point a class it added to toggle in its content. I have been told this isn't working on an iOS9 device and I don't have one here to test myself to replicate the error. Can anybody see what part of this isn't supported? I suspect it would be classList.contains but I'm not positive. Any suggestions would be great!

function toggleLume() {
    const lumeImages = document.querySelectorAll('.model-image.lume');
    lumeImages.forEach(image => image.classList.toggle('is-active'));
    lumeIcons.forEach(icon => icon.classList.toggle('is-active'));
}

function checkIfInView() {
    const windowHeight = window.innerHeight;
    const windowTopPosition = window.scrollY;
    const windowBottomPosition = (windowHeight + windowTopPosition);
    const buffer = 120;
    const panels = document.querySelectorAll('.panel');

    panels.forEach(panel => {
        const panelHeight = panel.clientHeight;
        const panelTop = (panel.offsetTop - panel.scrollTop) + buffer;
        const panelBottom = (panelTop + panelHeight);

        if ((panelBottom >= windowTopPosition) && (panelTop <= windowBottomPosition) && !panel.classList.contains('in-view')) {
            panel.classList.add('in-view');
        }
    });
}

Side note, I am interested in JavaScript solutions first and jQuery if I have no other plain JS option.

Yuschick
  • 2,642
  • 7
  • 32
  • 45
  • JavaScript/DOM support isn't generally by OS version, but rather by browser version. I'd suggest using a site like http://caniuse.com/ to figure out what's supported in which browser. – Heretic Monkey Jan 09 '17 at 15:43
  • 1
    You can also use [BrowserStack.com](http://www.browserstack.com) to test your code on iOS devices. – Barmar Jan 09 '17 at 15:49
  • Thanks @Barmar for the link. Turns out the issue is with the `.forEach` statements. I have converted those to traditional `for` loops and everything looks to be good now. – Yuschick Jan 09 '17 at 16:54
  • 1
    I guess Babel isn't able to figure out when to use a polyfill for that. In Safari, `NodeList` isn't iterable. – Barmar Jan 09 '17 at 16:59
  • See http://stackoverflow.com/questions/41388374/javascript-for-of-doesnt-work-in-safari/41388701#41388701 for a similar issue, where someone tried to use ES6 `for-of` on a `NodeList` in Safari. But Babel should be able to rewrite that, since it's syntax rather than data-dependent. – Barmar Jan 09 '17 at 17:02
  • Perfect! Thanks again, @Barmar – Yuschick Jan 09 '17 at 17:12
  • I believe `babel-polyfill` should add `DOMTokenList.prototype.forEach`, strange. Are you loading `babel-polyfill`? – loganfsmyth Jan 09 '17 at 23:41

0 Answers0