Dynamically loaded Bootstrap Modal does not scroll on iOS 9 - javascript

Scenario: The project I'm working on requires that content get loaded into a Bootstrap 3 modal asynchronously, with loading indication displayed to the user. The actual loading is not an issue (see my Codepen below), but what is an issue is scrolling on iOS 9 devices when the loaded content is large. It works correctly on every other device that I've tried, including iOS 8. I think the DOM doesn't update the 's scroll height, so it doesn't think the modal should be scrollable.
The only work-around I've found that reliably works (but is unacceptable) is to hide/show the modal's body, thus forcing a recalculation. Bootstrap's own handleUpdate function doesn't take care of the issue.
I've created a minimal example on Codepen at http://codepen.io/jkrehm/full/LpRzJV/ (code available here). I wish I could embed a QR code in my question so you could easily get to it on your phones.
The most relevant code is this:
// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
$(this).find('.modal-body')
.html('loading...')
.load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
// Use Bootstrap's built-in function to fix scrolling (to no avail)
$modal.modal('handleUpdate');
});
});
If I change the code so the content is loaded before the modal is shown, things work fine, but there's no loading indicator for the user (just a pause of indeterminate length after they click the button and before the modal appears).
Summary: What can I do to convince iOS 9 to recalculate the .modal-body's scroll height?
Update (Aug 15, 2017):
Apparently there is no satisfactory resolution to this issue. Bootstrap has chosen to remove -webkit-overflow-scrolling:touch from the modals and filed a bug with Webkit about it. Maybe it will get fixed someday, maybe not. For now, the provided work-arounds are the best "solutions".

CSS work-around:
.modal-dialog {
height: 101%;
}
Works by making it so that the dialog is always scroll-able, regardless of content size.
From: https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164

My co-worker and I were able to figure out a hacky work-around for this issue.
Using my code from above, something like this will make scrolling work on iOS 9:
// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
$(this)
.css('overflow-y', 'hidden')
.find('.modal-body')
.html('loading...')
.load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
// Use Bootstrap's built-in function to fix scrolling (to no avail)
$modal
.css('overflow-y', '')
.modal('handleUpdate');
});
});
Note the .css('overflow-y', ...) lines. That's the magic sauce. Instead of mucking with the actual CSS, though, we're using a class – .modal-scrollfix – that we add & remove to achieve the same results.
I've created a fork of my previous pen and applied the fix. http://codepen.io/jkrehm/full/OybdrW/ (code)
I have a ticket open with Bootstrap about this issue, but I'm not sure what they can do except add documentation. Hopefully Apple fixes the issue with a future version of iOS Safari.

I managed to fix this by adding the following line just after the contecnt was dynamically loaded via javascript :
$("div#myModal").css('overflow', 'auto');

Related

Skrollr mobile broken. Unable to preventDefault inside passive event listener

I'm getting the following error on all chromium browsers when using Skrollr library and loading the website as mobile:
"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>"
The library was working fine last week and now I'm getting this error on every browser I try while loading page as mobile.
Even the examples in official github are broken when loaded on mobile and show the same error.
Does anyone know how this could be fixed?
skrollr.js:730--
https://raw.githubusercontent.com/Prinzhorn/skrollr/master/src/skrollr.js
Examples with the errors from the git links:
http://prinzhorn.github.io/skrollr/examples/docu/1.html
http://prinzhorn.github.io/skrollr/examples/docu/2.html
http://prinzhorn.github.io/skrollr/examples/docu/3.html
http://prinzhorn.github.io/skrollr/examples/docu/4.html
To replicate, - load the page, inspect, choose mobile and refresh. Suddenly it all breaks and reports errors.
HTML tag should have
class="skrollr skrollr-mobile"
if detected mobile device load.
I was developing a website using this and on the 9th of July 21 afternoon I noticed that behavior has changed and that's when I noticed the errors.
I've recreated a simple website using this and saw exactly the same problem. Later on I decided to check git hub linked examples and saw the same problem.
Could it be some sort of update to the browser cores? A fix or bypass would be greatly appreciated.
Update:
I've found out that adding the following line to CSS gets rid of the errors.
* {
touch-action: manipulation;
}
Unfortunately functionality of the library is still not working at 100% on mobile. The scripts that calculate the amount of scrollable area on mobile are off and adds whitespaces to the end of the document. All scroll events are affected by this miss-calculation.
So After looking into this matter a little bit more, I've found a solution which hopefully will help all the folks using this library in 2021 onwards.
To disable the errors add the following CSS:
* {
touch-action: manipulation;
}
And finally to have proper sizing of animations and no white spaces, especially if your:
transform: translateX();
gets disabled on main scroll body when you're on mobile devices, use the below code before your closing tag.
<script type="text/javascript">
if((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
} else {
skrollr.init();
}
</script>
This will help all who want to imitate horizontal scrolling while using vertical scrollbar.

Semantic UI - Mobile Scrolling Disabled Once Modal Opens (and remains disabled even after modal is closed)

I am using Semantic UI 2.3.2and having page scrolling problem on mobile, once modal is loaded the page scrolling function is disabled (even modal is closed after).
This behavior can even be experienced on official site https://semantic-ui.com/modules/modal.html just try to "Run Code" for any example modal, and then try to scroll page.
Searching through, I have already tried using observeChanges settings without any help.
P.S. You must check the link on mobile browser. I have tested on Android/Chrome.
So this was a Confirmed Bug on Semantic UI 2.3.2 https://github.com/Semantic-Org/Semantic-UI/issues/6449
I have resolved it by downgrading the Semantic UI to 2.3.1 which has fixed the issue. So anyone facing the same problem can downgrade to resolve it for now until it's fixed in 2.3.2.
I fixed it by commenting out a line in modal.js. I'm not comfortable doing it as I'm not certain of any repercussions, but it was the only way I could get it to work. My version of modal.js is 2.4.2. Here is the code:
scrollLock: function() {
// touch events default to passive, due to changes in chrome to optimize mobile perf
$dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
}
I commented out the line $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
That line of code disables scrolling (module.event.preventScroll) when the user does a 'touchmove', which prevents the dropdown from scrolling. Commenting out the line fixed the problem for me.
I got scrolling to work by using the Formantic-UI modal.js from their GitHub as suggested in the comment for the issue shared in the answer by #Alyas.
So, in practice in the index.html after the <script src="lib/semantic-ui/semantic.min.js"></script> I added <script src="lib/formantic-ui/modal.js"></script> and that made scrolling work.

freeMode not working in mobile browser using Swiper

I'm trying to use Swiper in a mobile hybrid app and I noticed the freeMode option wasn't responding which I wanted it do. I couldn't figure out what I did wrong until I tried one of the demos on idangero.us that uses freeMode and I ran it on my desktop browser (FireFox, latest) in mobile view and it didn't work.
I tried it on my phone as well and it didn't work there either which to me suggests that this feature isn't supported on mobile browsers.
This is kind of a deal-breaker for me and I need to know if there is any kind of known workaround? I tried Swipeshow as an alternative and they make it work, but it's a jQuery plugin and I want to avoid using jQuery since I'm not using it in the rest of the app.
Edit
To clarify, I want freeMode to be false, I want freeMode to be set to false but in the demo linked above freeMode kicks in on mobile devices, it only sticks on desktop devices.
Edit 2
I've found that if I change to mobile mode in firefox (ctrl+shift+m) and then back again it works. What seems to happen when I do that is that something is triggered and the swipe-slides (the slider content) get their width set explicitly. After that it seems to work. Setting the width manually in my developer tools doesn't seem to be doing very much though.
Well, I figured out the problem. It was a bit tricky.
At the time of initiating Swiper the div containing my swiping stuff was not showing (display: none). The solution was to wait with the Swiper initialization until I'd actually shown the div containing my swipe stuff.
The thing that really bugs me though is that Swiper didn't fail in any way, it just tried to do its best and gave me semi-functionality. I would've preferred a crash stating something like "Could not compute slide-sizes" or something like that. Instead it fails silently :(

Why the click does not work in touch mode

I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/

Hide everything outside window HTML jQuery

So i made a website, basically first time messing around with jquery.
I have a div main-container which contains all the content. This main-slider slides in the window. i'd set it up by doing this in the document.ready function:
<script>
$("#main-slider").hide().animate({left:'+=2000', opacity:'0.0'},0);
$("#main-slider").fadeIn(100).animate({left:'-60', opacity:'1.0'},1000);
$("#inhoud").delay(100).animate({left:'-30', opacity:'1.0'},300);
$("#inhoud").delay(20).animate({left:'-5', opacity:'1.0'},300);
$("#main-slider").animate({left:'-40', opacity:'1.0'},150);
</script>
On normal browsers (tested with safari, chrome and firefox) it looks like how i want to but on mobile devices it starts zoomed out since the main-slider starts animating from +=2000;
Is there a way to hide the div when it's not inside the viewport ?
I made a jsFiddle with a basic concept of what i have, unfortunately it doesn't seem to work tho ;p sorry.
JSFiddle
A concept version of the website : http://paparashie.nl/woonkans
I'm not sure I am understanding correctly, but have you tried with css?
html {
overflow: hidden;
}
Apply this to html or body...
JSfiddle is not working, can you attach screenshot to help us see the problem

Categories