Not working in iOS

[oakeef]

The iframe lightbox doesn't scroll in iOS

[electerious]

Can you describe the problem in more detail?

[ammbo]

I also see this issue. When the lightbox opens an iframe in iOS and the embedded page is taller than the iframe, you cannot scroll using touch gestures. I tried raising the z-index of the iframe but it did not work. Any ideas?

Also, a close button would be cool, I will try to create one.

[ammbo]

Might be something to do with this: https://stackoverflow.com/questions/43262156/cant-scroll-iframe-on-mobile-ios-safari

Or this: https://davidwalsh.name/scroll-iframes-ios

I tried both methods and it still would not work. Any thoughts?

[electerious]

iframes on iOS are gross. The wrapper trick can help, but that's not an issue of basicLightbox.

A close button can be added either via CSS (add an ::after element to the basicLightbox background) or using a helper function like this:

export const addCloseButton = (instance) => {

    const elem = instance.element()

    elem.insertAdjacentHTML('beforeend', `
        <button class="close">
            <svg width="512px" height="512px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                <polygon points="340.2,160 255.8,244.3 171.8,160.4 160,172.2 244,256 160,339.9 171.8,351.6 255.8,267.8 340.2,352 352,340.3 267.6,256 352,171.8"></polygon>
            </svg>
        </button>
    `)

    const button = elem.querySelector('.close')

    button.onclick = instance.close

}

You can also add support for the ESC key in a similar way:

export const closeOnEsc = (instance) => {

    document.onkeydown = (e) => {
        if (esc(e.keyCode) === true) instance.close()
    }

}

[ammbo]

Thanks Tobias! I think the iframe issue in Safari is more about the page that is being displayed than it is about the lightbox. The page resizes itself as it loads, breaking the iframe.