Material: md-dialog custom dialog not working on IE 11

Created on 9 Jun 2015  路  2Comments  路  Source: angular/material

To reproduce this issue, open https://material.angularjs.org/latest/#/demo/material.components.dialog on Internet Explorer and click on CUSTOM DIALOG.

IE version used: IE 11.0.9600.17801
ngMaterial: 0.9.8

PS: I wish Chrome was everyone option... ;)

IE

Most helpful comment

Not to beat a dead horse, but this issue is still occurring.

Browser: IE11
Angular: 1.5.8
Angular-material: 1.1.3

Using Browserstack to test and seeing the following:

  • Have a dialog with an activity feed. The feed uses a poller to periodically contact the API for newer activity. This feed is inside an md-tab.
  • Initial load, populate list for the first time, dialog cannot scroll.
  • If the user interacts with something inside the tab, nothing changes. If the user interacts with something outside the tab (e.g. hovering over a button), the scrollbar appears and the user can scroll normally.
  • If the user scrolls to the bottom of the feed, it manually triggers the API to look for older activity. When this happens, the screen glitches out and the scrollbar disappears, forcing the user back to the top of the dialog.

All 2 comments

More specifically, the initial opening of the custom dialog appears in IE11 to be initially locked into a non-scrollable panel and you are viewing the bottom portion of the dialog panel only. There is no vertical scrollbar to use to scroll the content, nor does the use of a mouse wheel engage scrolling.

The ironic thing, which I keep encountering with IE11 and the material angular project (which oddly enough, I have not encountered as often with other material frameworks), is that if you do something minimal which forces IE11 to re-render the page layout, it then "wakes up" and renders things properly. In this instance, for me, just hitting the ALT key to pop open the IE11 menu bar is enough to drop down the browser screen, which apparently forces a re-rendering, and IE11 is then able to pick up on the need for the scroll bar and the dialog "appears" to work correctly. I would guess that IE11 is having some trouble recognizing when elements are being dynamically added to the layout and there is no triggering "refresh" of the layout so IE11 expects the content to not need to scroll, and therefore you end up with the odd behavior.

Not to beat a dead horse, but this issue is still occurring.

Browser: IE11
Angular: 1.5.8
Angular-material: 1.1.3

Using Browserstack to test and seeing the following:

  • Have a dialog with an activity feed. The feed uses a poller to periodically contact the API for newer activity. This feed is inside an md-tab.
  • Initial load, populate list for the first time, dialog cannot scroll.
  • If the user interacts with something inside the tab, nothing changes. If the user interacts with something outside the tab (e.g. hovering over a button), the scrollbar appears and the user can scroll normally.
  • If the user scrolls to the bottom of the feed, it manually triggers the API to look for older activity. When this happens, the screen glitches out and the scrollbar disappears, forcing the user back to the top of the dialog.
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rtprakash picture rtprakash  路  3Comments

buzybee83 picture buzybee83  路  3Comments

ddimitrop picture ddimitrop  路  3Comments

epelc picture epelc  路  3Comments

robertmesserle picture robertmesserle  路  3Comments