{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/16557","repository_url":"https://api.github.com/repos/twbs/bootstrap","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/16557/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/16557/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/16557/events","html_url":"https://github.com/twbs/bootstrap/issues/16557","id":82150689,"number":16557,"title":"<select>s in tall Modals in iOS 8.3 break fixed alignment and scrolling","user":{"login":"SimonKaluza","id":648386,"avatar_url":"https://avatars.githubusercontent.com/u/648386?v=3","gravatar_id":"","url":"https://api.github.com/users/SimonKaluza","html_url":"https://github.com/SimonKaluza","followers_url":"https://api.github.com/users/SimonKaluza/followers","following_url":"https://api.github.com/users/SimonKaluza/following{/other_user}","gists_url":"https://api.github.com/users/SimonKaluza/gists{/gist_id}","starred_url":"https://api.github.com/users/SimonKaluza/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SimonKaluza/subscriptions","organizations_url":"https://api.github.com/users/SimonKaluza/orgs","repos_url":"https://api.github.com/users/SimonKaluza/repos","events_url":"https://api.github.com/users/SimonKaluza/events{/privacy}","received_events_url":"https://api.github.com/users/SimonKaluza/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/twbs/bootstrap/labels/browser%20bug","name":"browser bug","color":"00abe1"},{"url":"https://api.github.com/repos/twbs/bootstrap/labels/confirmed","name":"confirmed","color":"b94a48"},{"url":"https://api.github.com/repos/twbs/bootstrap/labels/v3","name":"v3","color":"d9534f"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":18,"created_at":"2015-05-28T22:25:06Z","updated_at":"2016-03-24T20:23:30Z","closed_at":"2015-10-13T02:18:06Z","body":"Whenever you deselect/blur on a `<select>` dropdown that is within a Bootstrap Modal that has vertical overflow/scrollbars in iOS 8.x Safari or iOS8's Webkit WebView, [Apple's `position: fixed` bug](http://getbootstrap.com/getting-started/#support-fixed-position-keyboards) badly messes up the alignment of any other HTML element within the modal.  The browser will believe any of the HTML elements in the modal are at a very different location than what is actually rendered, and this can be verified by examining the page using the Web Inspector.\r\n\r\nCheckout this [JSBin example](http://jsbin.com/zizaba/3) on an iOS device (preferably within the iPad Simulator with Web Inspector) and tab to the dropdown at the bottom, select an item, then try to select one of the text inputs within the modal.  You'll see that in order to select an input, you'll have to click/touch where the browser *thinks* the `<input>` element is, not where it actually appears on screen.  To make matters worse, after removing focus from the `<select>` element, you won't be able to scroll the modal up or down at all until you select another input element within the modal.\r\n\r\nHere is a screenshot demonstrating how Safari believes the modal-content div is positioned higher (and where it responds to mouse/touch events) as opposed to where is actually rendered:\r\n\r\n![modal-dropdown-bug](https://cloud.githubusercontent.com/assets/648386/7872179/1b66b942-0564-11e5-8194-1245b9648c72.png)\r\n\r\n\r\nI've come up with a hack to fix the `position: fixed` alignment bugs by adding a listener to any `select` element's `blur` event that realigns the content by forcing the HTML body to scroll to the top of the page with the following code:\r\n\r\n    $('modal').find('select').blur(function(){\r\n        $('body').scrollTop(0);\r\n    });\r\n\r\nBut this hack does not fix the modals scrolling even after the alignment is fixed.  Any ideas on how one might fix that?"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/201004109","html_url":"https://github.com/twbs/bootstrap/issues/16557#issuecomment-201004109","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/16557","id":201004109,"user":{"login":"twbs-lmvtfy","id":7893075,"avatar_url":"https://avatars.githubusercontent.com/u/7893075?v=3","gravatar_id":"","url":"https://api.github.com/users/twbs-lmvtfy","html_url":"https://github.com/twbs-lmvtfy","followers_url":"https://api.github.com/users/twbs-lmvtfy/followers","following_url":"https://api.github.com/users/twbs-lmvtfy/following{/other_user}","gists_url":"https://api.github.com/users/twbs-lmvtfy/gists{/gist_id}","starred_url":"https://api.github.com/users/twbs-lmvtfy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/twbs-lmvtfy/subscriptions","organizations_url":"https://api.github.com/users/twbs-lmvtfy/orgs","repos_url":"https://api.github.com/users/twbs-lmvtfy/repos","events_url":"https://api.github.com/users/twbs-lmvtfy/events{/privacy}","received_events_url":"https://api.github.com/users/twbs-lmvtfy/received_events","type":"User","site_admin":false},"created_at":"2016-03-24T20:23:30Z","updated_at":"2016-03-24T20:23:30Z","body":"\nHi @beedaan!\n\nYou appear to have posted a live example (http://jsbin.com/nugihe/edit), which is always a good first step. However, according to [the HTML5 validator](http://html5.validator.nu), **your example has some validation errors**, which might potentially be causing your issue:\n* line 88, column 17 thru column 54: Attribute ```` inputmode ```` not allowed on element ```` input ```` at this point.\n* line 89, column 17 thru column 24: Stray end tag ```` input ````.\n\nYou'll need to **fix these errors** and post a revised example before we can proceed further.\nThanks!\n\n(*Please note that this is a [fully automated](https://github.com/cvrebert/lmvtfy) comment.*)\n      "}}