search

angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.27k stars 6.73k forks source link

Background scroll after input focus in modal #6302

Open baidario opened 8 years ago

baidario commented 8 years ago

Bug description:

I have a modal window with a lot of input fields in it. At the bottom of this window I have a submit button. When I try to scroll down I get background side scrolled instead of modal window. This issue happens only when I focus on any input with the time or any select in IOS Safari

Link to minimally-working plunker that reproduces the issue:

https://embed.plnkr.co/kB2h6UEQkA3VIX8KJSAS/

Version of Angular, and Bootstrap

Angular: 1.5.0 Bootstrap: 1.3.1

thedigitalman commented 8 years ago

I'm experiencing a similar issue in a directive that checks for invalid inputs, then scrolls to the input ID and sets focus to the field. When I remove firstInvalid.focus(); it works, when that line is present iOS has seems to confuse its position, sometimes rendering the top half of the modal as scrollable and bottom as fixed. Other times scrolling within the modal is removed..

thedigitalman commented 8 years ago

Also, $anchorScroll.yOffset does not work as expected in the modal

thedigitalman commented 8 years ago

This seems to patch the focus issue for me (with a slight jitter):

$timeout( function(){ document.getElementById( invalidFieldId ).focus(); }, 500 ); }

But, I still can't get the yOffset to work.