{"action":"closed","issue":{"url":"https://api.github.com/repos/PolymerElements/app-layout/issues/320","repository_url":"https://api.github.com/repos/PolymerElements/app-layout","labels_url":"https://api.github.com/repos/PolymerElements/app-layout/issues/320/labels{/name}","comments_url":"https://api.github.com/repos/PolymerElements/app-layout/issues/320/comments","events_url":"https://api.github.com/repos/PolymerElements/app-layout/issues/320/events","html_url":"https://github.com/PolymerElements/app-layout/issues/320","id":175802143,"number":320,"title":"Issue with has-scrolling-region + fixed + condenses + sticky","user":{"login":"Scarygami","id":809528,"avatar_url":"https://avatars.githubusercontent.com/u/809528?v=3","gravatar_id":"","url":"https://api.github.com/users/Scarygami","html_url":"https://github.com/Scarygami","followers_url":"https://api.github.com/users/Scarygami/followers","following_url":"https://api.github.com/users/Scarygami/following{/other_user}","gists_url":"https://api.github.com/users/Scarygami/gists{/gist_id}","starred_url":"https://api.github.com/users/Scarygami/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Scarygami/subscriptions","organizations_url":"https://api.github.com/users/Scarygami/orgs","repos_url":"https://api.github.com/users/Scarygami/repos","events_url":"https://api.github.com/users/Scarygami/events{/privacy}","received_events_url":"https://api.github.com/users/Scarygami/received_events","type":"User","site_admin":false},"labels":[{"id":245018415,"url":"https://api.github.com/repos/PolymerElements/app-layout/labels/bug","name":"bug","color":"fc2929","default":true},{"id":334157258,"url":"https://api.github.com/repos/PolymerElements/app-layout/labels/p0%20-%20critical","name":"p0 - critical","color":"c14d66","default":false}],"state":"closed","locked":false,"assignee":{"login":"blasten","id":1410613,"avatar_url":"https://avatars.githubusercontent.com/u/1410613?v=3","gravatar_id":"","url":"https://api.github.com/users/blasten","html_url":"https://github.com/blasten","followers_url":"https://api.github.com/users/blasten/followers","following_url":"https://api.github.com/users/blasten/following{/other_user}","gists_url":"https://api.github.com/users/blasten/gists{/gist_id}","starred_url":"https://api.github.com/users/blasten/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/blasten/subscriptions","organizations_url":"https://api.github.com/users/blasten/orgs","repos_url":"https://api.github.com/users/blasten/repos","events_url":"https://api.github.com/users/blasten/events{/privacy}","received_events_url":"https://api.github.com/users/blasten/received_events","type":"User","site_admin":false},"assignees":[{"login":"blasten","id":1410613,"avatar_url":"https://avatars.githubusercontent.com/u/1410613?v=3","gravatar_id":"","url":"https://api.github.com/users/blasten","html_url":"https://github.com/blasten","followers_url":"https://api.github.com/users/blasten/followers","following_url":"https://api.github.com/users/blasten/following{/other_user}","gists_url":"https://api.github.com/users/blasten/gists{/gist_id}","starred_url":"https://api.github.com/users/blasten/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/blasten/subscriptions","organizations_url":"https://api.github.com/users/blasten/orgs","repos_url":"https://api.github.com/users/blasten/repos","events_url":"https://api.github.com/users/blasten/events{/privacy}","received_events_url":"https://api.github.com/users/blasten/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2016-09-08T16:38:32Z","updated_at":"2016-11-09T18:48:59Z","closed_at":"2016-11-09T18:48:59Z","body":"There's a race condition happening when using a layout like this.\n\n```\n<app-header-layout fullbleed has-scrolling-region>\n  <app-header fixed condenses>\n    <div id=\"first\">First row</div>\n    <div id=\"sticky\" sticky>Second row</div>\n  </app-header>\n  <div content>\n    ...\n  </div>\n</app-header-layout>\n```\n\n[This check in app-header-layout](https://github.com/PolymerElements/app-layout/blob/master/app-header-layout/app-header-layout.html#L194) to determine whether to use margin-top or padding-top for the content div happens before the `app-header` had a chance to initialize, meaning that [`_dHeight`](https://github.com/PolymerElements/app-layout/blob/master/app-header/app-header.html#L506) is still zero, which makes [`willCondense`](https://github.com/PolymerElements/app-layout/blob/master/app-header/app-header.html#L613) wrongly false, resulting in a margin to be set instead of a padding, which in turns results in a visible margin below the sticky element when scrolling down.\n\n![issue1](https://cloud.githubusercontent.com/assets/809528/18357578/ca9ab108-75f1-11e6-98a3-cc8b34364eb1.PNG) ![issue2](https://cloud.githubusercontent.com/assets/809528/18357579/ccc58dc2-75f1-11e6-956d-884e0fab76e1.png)\n\nWhen/if `resetLayout` gets called again at some later point (e.g. if the window is resized), the margin is replaced with a padding as intended:\n\n![issue3](https://cloud.githubusercontent.com/assets/809528/18357633/0380c1c4-75f2-11e6-8633-2fcd5552f4e3.png) ![issue4](https://cloud.githubusercontent.com/assets/809528/18357637/056a3f10-75f2-11e6-93f9-66a512c5cafc.png)\n\nThe easiest fix I found for this issue (and I have a PR prepared for that, but with no test yet) is to move the [firing of the `app-header-reset-layout`](https://github.com/PolymerElements/app-layout/blob/master/app-header/app-header.html#L484) into the debounced function, because then `resetLayout` of the `app-header-layout` element will definitely be called after `app-header` has finished adjusting its internal parameters.\n\nSample with current app-layout version: \nhttp://scarygami.github.io/tests/app-header-layout-issue/\n\nSample with fixed app-layout version:\nhttp://scarygami.github.io/tests/app-header-layout-issue-solved/\n\nMake sure to test the samples without resizing the window before scrolling down, because resizing the windows triggers `resetLayout`.\n"}}
{"actor":{"display_login":"frankiefu"}}