[modal] modal is hidden with scrollable content on IE11
See original GitHub issueOn IE11, modal written before scrollable element is hidden with the scrollable content.
It is reproducible only with current dev
branch.
Example
<div id="app">
<b-modal ref="modal1">modal-1</b-modal>
<div style="height:100px;overflow-y:auto;">
<div style="background-color:yellow;height:600px;">content</div>
</div>
<b-modal ref="modal2">modal-2</b-modal>
<b-button @click="$refs.modal1.show()">show modal-1</b-button>
<b-button @click="$refs.modal2.show()">show modal-2</b-button>
</div>
‘modal-1’ is shown on click ‘show modal-1’ button, but is hidden with ‘content’.
‘modal-2’ is shown on click ‘show modal-2’ button, and is not hidden.
Environment
OS: Windows 10 (1803)
Browser: IE11 (11.407.17134.0)
Bootstrap-Vue: HEAD of dev
branch (8b8272bad45585389989064aa11e1fd622237493)
It does not reproduce with Firefox (63.0.3), Edge (42.17134.1.0), Chrome (70.0.3538.110).
It does not reproduce with Bootstrap-Vue 2.0.0-rc.11.
It does not reproduce on playground of dev
build.
Workaround
Writing all modals at the end of the content maybe avoid this issue.
Issue Analytics
- State:
- Created 5 years ago
- Comments:27 (14 by maintainers)
Top Results From Across the Web
Transform + positioning issue in IE 11 - Stack Overflow
I have a position:fixed div in a modal on which bootstrap applied the transform:translate rule. It works fine in FF and Chrome but...
Read more >div modal popup not rendered correctly on IE when screen is ...
I have a div modal popup that displays fine in Chrome but in IE 11 it ... overflow: auto /* Enable scroll if...
Read more >CTA Modal: How To Build A Web Component
A screenshot of the CTA Modal dialog displaying a scrollable piece of content. CTA Modal — scrollable content. (Large preview). Before We Even ......
Read more >Modal - Bootstrap
Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so...
Read more >Modals not working on IE11 - Material Design for Bootstrap
Then, the issue: I can't make modals working on IE11. ... aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
bootstrap-vue v2.0.0-rc.14 & IE11(11.590.17134.0)
modal-1, modal-2, modal-3, modal-4: fine This issue seems to be solved.
Excellent.