We Keep Coding

Dynamically loaded Bootstrap Modal does not scroll on iOS 9

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');

Smooth Scroll Javascript Breaks Internal Links, Only In Firefox

I have a one-page website built on Bootstrap. All of the menu items are internal links pointing to divs in the body, and I have a bit of smooth scroll javascript to animate page's scrolling.
Everything works fine in Chrome and IE, but in Firefox the links don't work at all. It seems like a Javascript issue, because if I comment out the lines referring to the smoothscroll .js file, then the links work fine.
The javascript that I'm using is this:
$('a[href*=#]').each(function() {
if($(this).attr('href').indexOf("#") == 0) {
$(this).click(function(e) {
e.preventDefault();
var targetOffset = $($(this).attr('href')).offset().top;
$('body').animate({scrollTop: targetOffset - 70}, 700);
});
}
});
What am I missing/doing wrong?
You can take a look at the actual site in question here.

Change your scrollTop animation to
$('body,html').animate({scrollTop: targetOffset - 70}, 700);
That should fix it in FF an also still work in Chrome.
update
Just in case you're asking why: I don't know for sure, so this is what I guess is happening: if you compare the HTML and BODY in FF and Chrome, in FF the size of the HTML-Element is as big as your rendered document. In Chrome your HTML-Element has the size of the Browser-Window and your BODY-Element is as big as your Page rendered. They render differently. FF scrolls the HTML inside its Window and Chrome scrolls the BODY inside the HTML.
As pointed out in other threads / comments (here for expample) this solution makes two calls. So you could put an if before scrolling or use document. The latter didn't do the trick for me, because it scrolled where I wanted it to scroll to, but didn't animate. Without if I personally just find it nicer to read and it shouldn't be such a big thing to call animate twice in that case. So the better solution would be detecting the browser and using either $('html') or $('body').

Have scrollbar scrolled to the bottom without using Javascript?

I am currently setting a scrollbar to show as scrolled to the bottom upon page load by using this jquery code -
$(document).ready(function() {
$('.mydiv').scrollTop($('.mydiv')[0].scrollHeight);
});
Is there a way to do this using only css? So that this scrollbar is automatically scrolled to the bottom when the user visits the page?

You can do this without javascript by using anchors in the URL and in the document, with you placing the target anchor at the bottom of the page. Though this is not really very elegant.

There is browser based extension that can help you with that.
Different browsers use different extensions:
Chrome, Safari: WebKit, IE: Trident, FF: Gecko.
Each one can have different ways to do that.
I don't know specific features of webkits, but try to google for example
::-webkit-scrollbar-track-piece:start
I know it is not a straigtforward answer, but I hope it will help you in your research.

Jquery Drag and Drop problem, jump to a new page

I want to use Jquery to implement a page that contains js from quotemedia.com. After I embed the js into the sortable, when I drag and drop the element that contains the js, it jump to full page display.
This happens under Firefox, IE is ok.
The running code is here: http://jsfiddle.net/dodoflying/9BkJ5/ Please use firefox to drag and drop element shopping to see the problem.
Is is a bug under firefox? How could I solve this problem?
Thanks in advance!
Don

I don't know if it's a bug on FF or a bad implementation in IE, anyway if you don't have a problem put the JS in a seperate html and include the html page in an iframe you'll still see the iframe reloaded but not the whole page, refer for this link for more info.
iFrame reload on sortable
Edit: by the way, you don't need to connect the list to itself...it's already connected so this is not needed:
$( ".column" ).sortable({
connectWith: ".column"
});
Now back to the main issue, as you can see the iframe (or your code) will be reloaded each time you change it's order in the dom tree, so instead of using sortable..maybe you will be able to come up with a similar effect by absolutely position these DIVs and change their position (CSS top & left using JS) when dragging them but this would require A LOT of work.

I just found it could be solved by using Jquery to remove the following javascript
<script src="http://app.quotemedia.com/quotetools/miniCharts.go?webmasterId=93004&symbol='.$symbol_chart.'&toolWidth=660&chhig=130&chbg=ffffff&chln=333333&chgrd=D5DDE8&chxyc=2B5286&chtcol=2B5286&chbgch=ffffff&chbdr=2B5286&chfill=ee5E739B&chfill2=8BA9E0" type="text/javascript" language="javascript"></script>
Under both Firefox and IE, it is ok.

how do you prevent page scroll in textarea on mobile safari

I am trying to make a little note pad app for mobile safari for funzies but so far it doesn't seem to be working out. I want to prevent page scrolling so it doesn't have the rubberband and feel like a webapp but to do this I am using:
document.ontouchmove = function(e){
alert("calling prevent default");
e.preventDefault();
}
This works great except for in textarea where it looks like ontouchmove never gets fired so page scrolling still happens. Has anyone figured out how to change apple's default functionality in the text area or figured out an alternative to text area that doesn't have apple's default functionality?

There does not appear to be a good solution at this time. I found a project that is struggling with this problem as well and folks have gotten creative with hidden spans over text fields but that is still pretty buggy for me.
http://code.google.com/p/iscroll-js/issues/detail?id=24
I guess this is just a limitation to mobile safari as there doesn't appear to be a good solution that I can find at this time.

I read somewhere that putting your content in a <div> with "overflow:hidden" and setting the height of the div should prevent scrolling. Please tell us if it works.