bootstrap-additions
bootstrap-additions copied to clipboard
Interaction freezes on Chrome when using a center option for AngularStrap modals
I have already reported this on AngularStrap issues (https://github.com/mgcrea/angular-strap/issues/1051) but maybe it is more of a BootstrapAdditions problem.
The thing is, when using modals with placement: 'center' option, on Chrome interaction freezes unless a window is resized.
This could be not a big issue but only when an HTML text area tag is used - you can't add any text to it (well, unless a window is resized).
+1
I localized the bug in this plunker http://plnkr.co/edit/CP5I0K67scavp7xOcol1?p=preview .
Open it and click Launch the preview in a separate window button (There is no bug if you just open modal in plunker's iframe!). Then open modal and try to select it's title or content. It is unselectable. Also if you place any <input> elements in content they will be uninteractable too.
This bug is reproducible only in Google Chrome 41-42 under Win and Linux (I tried Chrome 27 and Firefox (many versions including last) and they haven't this bug). Also only if data-placement="center" and data-animation="am-fade-and-scale" or data-animation="am-fade-and-slide-top". If for example data-animation="am-fade" then bug disappear.
I removed bootstrap-additions.css from plunker and copy-paste .modal classes from it into style.css.
Then I found what causes this bug. It is position: fixed. But I really O_o. Why?...
Also note: if in opened bugged modal we change any css property through DevTools then bug disappears. O_o
I have no ideas what is going on.
I'm experiencing something similar as well. There is a visual artifacts as well. If a open the first modal example on the AngularStrap website the border around the close button is blurry and there is no effect on hover.
This seems to be related to the translate transform on the modal. If I remove that styling everything is fine.
+1