{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/3455","labels_url":"https://api.github.com/repos/angular/material/issues/3455/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/3455/comments","events_url":"https://api.github.com/repos/angular/material/issues/3455/events","html_url":"https://github.com/angular/material/issues/3455","id":90956773,"number":3455,"title":"IE11 scrollable element performance with large/complex DOM ","user":{"login":"stevenmiles","id":623813,"avatar_url":"https://avatars.githubusercontent.com/u/623813?v=3","gravatar_id":"","url":"https://api.github.com/users/stevenmiles","html_url":"https://github.com/stevenmiles","followers_url":"https://api.github.com/users/stevenmiles/followers","following_url":"https://api.github.com/users/stevenmiles/following{/other_user}","gists_url":"https://api.github.com/users/stevenmiles/gists{/gist_id}","starred_url":"https://api.github.com/users/stevenmiles/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stevenmiles/subscriptions","organizations_url":"https://api.github.com/users/stevenmiles/orgs","repos_url":"https://api.github.com/users/stevenmiles/repos","events_url":"https://api.github.com/users/stevenmiles/events{/privacy}","received_events_url":"https://api.github.com/users/stevenmiles/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/material/labels/browser:%20IE","name":"browser: IE","color":"fbca04"},{"url":"https://api.github.com/repos/angular/material/labels/needs:%20team%20discussion","name":"needs: team discussion","color":"c7def8"},{"url":"https://api.github.com/repos/angular/material/labels/type:%20performance","name":"type: performance","color":"207de5"}],"state":"open","locked":false,"assignee":{"login":"rschmukler","id":651740,"avatar_url":"https://avatars.githubusercontent.com/u/651740?v=3","gravatar_id":"","url":"https://api.github.com/users/rschmukler","html_url":"https://github.com/rschmukler","followers_url":"https://api.github.com/users/rschmukler/followers","following_url":"https://api.github.com/users/rschmukler/following{/other_user}","gists_url":"https://api.github.com/users/rschmukler/gists{/gist_id}","starred_url":"https://api.github.com/users/rschmukler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rschmukler/subscriptions","organizations_url":"https://api.github.com/users/rschmukler/orgs","repos_url":"https://api.github.com/users/rschmukler/repos","events_url":"https://api.github.com/users/rschmukler/events{/privacy}","received_events_url":"https://api.github.com/users/rschmukler/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/angular/material/milestones/17","html_url":"https://github.com/angular/material/milestones/0.11.0","labels_url":"https://api.github.com/repos/angular/material/milestones/17/labels","id":1166984,"number":17,"title":"0.11.0","description":"- DateTimepicker\r\n- SpeedDial (cont)\r\n- Menu (menubar, cascaded menus, hotkeys)\r\n- Chips (cont.)\r\n- textfields\r\n  *  `<md-text-search>`\r\n- bi-directional support (cont.)\r\n- Slider range\r\n\r\n\r\nPerformance improvements with ripples and ink\r\n","creator":{"login":"robertmesserle","id":571363,"avatar_url":"https://avatars.githubusercontent.com/u/571363?v=3","gravatar_id":"","url":"https://api.github.com/users/robertmesserle","html_url":"https://github.com/robertmesserle","followers_url":"https://api.github.com/users/robertmesserle/followers","following_url":"https://api.github.com/users/robertmesserle/following{/other_user}","gists_url":"https://api.github.com/users/robertmesserle/gists{/gist_id}","starred_url":"https://api.github.com/users/robertmesserle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robertmesserle/subscriptions","organizations_url":"https://api.github.com/users/robertmesserle/orgs","repos_url":"https://api.github.com/users/robertmesserle/repos","events_url":"https://api.github.com/users/robertmesserle/events{/privacy}","received_events_url":"https://api.github.com/users/robertmesserle/received_events","type":"User","site_admin":false},"open_issues":178,"closed_issues":169,"state":"open","created_at":"2015-06-16T15:48:24Z","updated_at":"2015-08-13T15:26:29Z","due_on":"2015-08-14T05:00:00Z","closed_at":null},"comments":26,"created_at":"2015-06-25T12:58:00Z","updated_at":"2015-08-13T17:33:52Z","closed_at":null,"body":"In IE11 a scrollable element that contains a large DOM performs poorly when interacting with that elements scrollbar.\r\n\r\nhttp://codepen.io/stevenmiles/pen/jPaZJL\r\n\r\nClicking the arrows on the scrollbar, clicking in the scrollbar to move the bar up/down and trying to drag the scrollbar are extremely laggy.\r\n\r\nBehaviours:\r\n\r\n- Removing angular-material.css restores the scrollbar to normal operation.\r\n\r\n- Only affects scrollable elements. The body scrollbar seems unaffected. However body scrollbar is hardy ever used due to the use of toolbar, sidenav and content components.\r\n\r\n- A UI responsiveness profile in IE11 shows that when clicking the scrollbar a style calculation is performed which is causing the laggy behaviour.\r\n\r\n- When angular-material.css is included, a style calculation is caused whenever the scrollbar is clicked.\r\n\r\n- The inordinate amount of universal attribute selectors in angular-material.css cause style calculations in IE11 to take an excessive amount of time for large DOMs. (also an issue for any component that might trigger a style calculation or layout i.e md-tabs)\r\n\r\nNotes:\r\n\r\n- No angular-material styles/attributes are used on any element in the codepen above\r\n\r\n- There are no watchers. The DOM is built in a directive to keep the codepen small. There are no bindings that will trigger a watch.\r\n\r\n- Obviously affects md-content as it is a scrollable element. \r\n\r\n"},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/130772454","html_url":"https://github.com/angular/material/issues/3455#issuecomment-130772454","issue_url":"https://api.github.com/repos/angular/material/issues/3455","id":130772454,"user":{"login":"rschmukler","id":651740,"avatar_url":"https://avatars.githubusercontent.com/u/651740?v=3","gravatar_id":"","url":"https://api.github.com/users/rschmukler","html_url":"https://github.com/rschmukler","followers_url":"https://api.github.com/users/rschmukler/followers","following_url":"https://api.github.com/users/rschmukler/following{/other_user}","gists_url":"https://api.github.com/users/rschmukler/gists{/gist_id}","starred_url":"https://api.github.com/users/rschmukler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rschmukler/subscriptions","organizations_url":"https://api.github.com/users/rschmukler/orgs","repos_url":"https://api.github.com/users/rschmukler/repos","events_url":"https://api.github.com/users/rschmukler/events{/privacy}","received_events_url":"https://api.github.com/users/rschmukler/received_events","type":"User","site_admin":false},"created_at":"2015-08-13T17:33:52Z","updated_at":"2015-08-13T17:33:52Z","body":"@MetalHexx so it is having lots of attribute selectors to check against that is likely causing the issue? Have you tried porting things to classes and seeing if that works?"}}