Wrong behavior on mobile phone

[xp19870106]

I have a remodal and there's an input on it. Sometimes i input something and click confirm or cancel, then strange behavior happens: the remodal disappeared but the gray overlay is still on the screen, click the gray overlay then the remodal appears again. Why? Is this a bug or any of you guys has ever encountered such problems?

[vodkabears]

Ha, welcome to the mobile web. In fact, it is the browser bug with fixed layouts.

[vodkabears]

See #96.

[robarwebservices]

I have the same issue. I know it is an IOS bug, but still need to find a way around it because it makes things basically unusable

[robarwebservices]

Here is my hack solution to at least make it usable for iphone users, for now. Borrowed the code from a bootstrap solution to solve the same problem, and modified it to work with remodal.

http://www.abeautifulsite.net/bootstrap-3-modals-and-the-ios-virtual-keyboard/

It is not without its problems, so if anyone can suggest a better alternative or improvements to this, I am all ears.

Leave all of the remodal code alone, and add this to your own .js:

       if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
        $(document).on('opened', '.remodal', function (e) {

            $('.remodal-wrapper')
            .css({
                position: 'absolute',
                marginTop: $(window).scrollTop() + 'px',
                bottom: 'auto'
            });

            // Position backdrop absolute and make it span the entire page
            // 
            // Also dirty, but we need to tap into the backdrop after Boostrap 
            // positions it but before transitions finish.
            //
            setTimeout(function () {
                $('.remodal-overlay').css({
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: Math.max(
                    document.body.scrollHeight, document.documentElement.scrollHeight,
                    document.body.offsetHeight, document.documentElement.offsetHeight,
                    document.body.clientHeight, document.documentElement.clientHeight
                ) + 'px'
                });
            }, 0);


        });
    }

[damienmcd]

@robarwebservices this seems to fix the issue to some extent.
Have you found a better solution since you implemented the above?
Thanks!

[robarwebservices]

@damienmcd No, I had already spent too much time on finding that solution. Had to call it "good enough for now" and move on. I'd still love to hear about other solutions though... Just don't have time to do more research on my own right now.

[damienmcd]

No problem @robarwebservices If I can make time to improve on your solution I'll let you know.
Your implementation is working fine for what I need at the moment.