{"action":"created","issue":{"url":"https://api.github.com/repos/Polymer/polymer/issues/4811","repository_url":"https://api.github.com/repos/Polymer/polymer","labels_url":"https://api.github.com/repos/Polymer/polymer/issues/4811/labels{/name}","comments_url":"https://api.github.com/repos/Polymer/polymer/issues/4811/comments","events_url":"https://api.github.com/repos/Polymer/polymer/issues/4811/events","html_url":"https://github.com/Polymer/polymer/issues/4811","id":252709318,"number":4811,"title":"blank frames when using slots.","user":{"login":"davidmaxwaterman","id":975698,"avatar_url":"https://avatars3.githubusercontent.com/u/975698?v=4","gravatar_id":"","url":"https://api.github.com/users/davidmaxwaterman","html_url":"https://github.com/davidmaxwaterman","followers_url":"https://api.github.com/users/davidmaxwaterman/followers","following_url":"https://api.github.com/users/davidmaxwaterman/following{/other_user}","gists_url":"https://api.github.com/users/davidmaxwaterman/gists{/gist_id}","starred_url":"https://api.github.com/users/davidmaxwaterman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidmaxwaterman/subscriptions","organizations_url":"https://api.github.com/users/davidmaxwaterman/orgs","repos_url":"https://api.github.com/users/davidmaxwaterman/repos","events_url":"https://api.github.com/users/davidmaxwaterman/events{/privacy}","received_events_url":"https://api.github.com/users/davidmaxwaterman/received_events","type":"User","site_admin":false},"labels":[{"id":438484067,"url":"https://api.github.com/repos/Polymer/polymer/labels/2.x","name":"2.x","color":"c5def5","default":false},{"id":118319119,"url":"https://api.github.com/repos/Polymer/polymer/labels/p1","name":"p1","color":"eb6420","default":false}],"state":"open","locked":false,"assignee":{"login":"sorvell","id":78891,"avatar_url":"https://avatars1.githubusercontent.com/u/78891?v=4","gravatar_id":"","url":"https://api.github.com/users/sorvell","html_url":"https://github.com/sorvell","followers_url":"https://api.github.com/users/sorvell/followers","following_url":"https://api.github.com/users/sorvell/following{/other_user}","gists_url":"https://api.github.com/users/sorvell/gists{/gist_id}","starred_url":"https://api.github.com/users/sorvell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sorvell/subscriptions","organizations_url":"https://api.github.com/users/sorvell/orgs","repos_url":"https://api.github.com/users/sorvell/repos","events_url":"https://api.github.com/users/sorvell/events{/privacy}","received_events_url":"https://api.github.com/users/sorvell/received_events","type":"User","site_admin":false},"assignees":[{"login":"sorvell","id":78891,"avatar_url":"https://avatars1.githubusercontent.com/u/78891?v=4","gravatar_id":"","url":"https://api.github.com/users/sorvell","html_url":"https://github.com/sorvell","followers_url":"https://api.github.com/users/sorvell/followers","following_url":"https://api.github.com/users/sorvell/following{/other_user}","gists_url":"https://api.github.com/users/sorvell/gists{/gist_id}","starred_url":"https://api.github.com/users/sorvell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sorvell/subscriptions","organizations_url":"https://api.github.com/users/sorvell/orgs","repos_url":"https://api.github.com/users/sorvell/repos","events_url":"https://api.github.com/users/sorvell/events{/privacy}","received_events_url":"https://api.github.com/users/sorvell/received_events","type":"User","site_admin":false},{"login":"TimvdLippe","id":5948271,"avatar_url":"https://avatars3.githubusercontent.com/u/5948271?v=4","gravatar_id":"","url":"https://api.github.com/users/TimvdLippe","html_url":"https://github.com/TimvdLippe","followers_url":"https://api.github.com/users/TimvdLippe/followers","following_url":"https://api.github.com/users/TimvdLippe/following{/other_user}","gists_url":"https://api.github.com/users/TimvdLippe/gists{/gist_id}","starred_url":"https://api.github.com/users/TimvdLippe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TimvdLippe/subscriptions","organizations_url":"https://api.github.com/users/TimvdLippe/orgs","repos_url":"https://api.github.com/users/TimvdLippe/repos","events_url":"https://api.github.com/users/TimvdLippe/events{/privacy}","received_events_url":"https://api.github.com/users/TimvdLippe/received_events","type":"User","site_admin":false}],"milestone":null,"comments":2,"created_at":"2017-08-24T19:40:40Z","updated_at":"2017-12-15T18:05:46Z","closed_at":null,"author_association":"NONE","body":"### Description\r\nI have an app in which in which I use a slot to pass an image into the light dom of an element.\r\n\r\nIn index.html, webcomponentsloader is lazy loaded on 'load', and my-app is lazy loaded on WebComponentsReady.\r\n\r\nI don't know where the actual problem might be...it might be with the technique I'm using, but I ran it by both @TimvdLippe and @sorvell at the Polymer Summit and they couldn't explain it either. It might be in polymer or chrome.\r\n\r\nThe problem does seem somewhat unpredictable...ie sometimes the blank frames don't appear. It is, however, very noticeable in my real app. It's surprising how short a time a flicker can be before it is noticeable :/\r\n\r\n#### Live Demo\r\nNot live, but I've made an example here:\r\n\r\nhttps://github.com/davidmaxwaterman/light-dom-demo\r\n\r\n#### Steps to Reproduce\r\n1. clone the above repo\r\n2. run `polymer serve&`\r\n3. open a web browser tab on `localhost:8081` or whatever URL it says\r\n4. open dev tools\r\n5. switch to 'performance' tab\r\n6. click on the 'start profiling and reload page' button, or ctrl-shift-e (on windows)\r\n\r\n#### Expected Results\r\nI expect no blank frames\r\n\r\n#### Actual Results\r\nI get blank frame around the FMP point.\r\n\r\n<img width=\"471\" alt=\"blank_frame\" src=\"https://user-images.githubusercontent.com/975698/29685008-f443c6e2-890b-11e7-967b-b2f5ea4d9af3.PNG\">\r\n\r\n### Browsers Affected\r\n<!-- Check all that apply -->\r\n- [X] Chrome\r\n- [ ] Firefox\r\n- [ ] Edge\r\n- [ ] Safari 9\r\n- [ ] Safari 8\r\n- [ ] IE 11\r\n\r\n### Versions\r\n- Polymer: \"2.0.1\"\r\n- webcomponents: 1.0.8\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/Polymer/polymer/issues/comments/352072994","html_url":"https://github.com/Polymer/polymer/issues/4811#issuecomment-352072994","issue_url":"https://api.github.com/repos/Polymer/polymer/issues/4811","id":352072994,"user":{"login":"sorvell","id":78891,"avatar_url":"https://avatars1.githubusercontent.com/u/78891?v=4","gravatar_id":"","url":"https://api.github.com/users/sorvell","html_url":"https://github.com/sorvell","followers_url":"https://api.github.com/users/sorvell/followers","following_url":"https://api.github.com/users/sorvell/following{/other_user}","gists_url":"https://api.github.com/users/sorvell/gists{/gist_id}","starred_url":"https://api.github.com/users/sorvell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sorvell/subscriptions","organizations_url":"https://api.github.com/users/sorvell/orgs","repos_url":"https://api.github.com/users/sorvell/repos","events_url":"https://api.github.com/users/sorvell/events{/privacy}","received_events_url":"https://api.github.com/users/sorvell/received_events","type":"User","site_admin":false},"created_at":"2017-12-15T18:05:46Z","updated_at":"2017-12-15T18:05:46Z","author_association":"MEMBER","body":"Sorry for the delay on this. It's possible that the way elements that are animating are rendered when distributed is confusing the situation. If there's a css animation/transition underway when distribution occurs, that animation will immediately complete (here's [an example](http://jsbin.com/buguzec/1/edit?html,output)).\r\n\r\nIn addition, when an element is distributed it may move position on screen (here's [an example of that](http://jsbin.com/viyogak/1/edit?html,output)).\r\n\r\nFinally, if there's a delay that allows for paint between when a shadowRoot is created (via `attachShadow`) and when nodes (including a `slot`) are added to it, then a \"blank\" frame could appear. In a typical Polymer element this is unexpected since element DOM is [immediately added](https://github.com/Polymer/polymer/blob/master/lib/mixins/element-mixin.html#L587) to the shadowRoot.\r\n\r\nHope that helps."}}
{"actor":{"display_login":"sorvell"}}