{"action":"opened","issue":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/11631","repository_url":"https://api.github.com/repos/mui-org/material-ui","labels_url":"https://api.github.com/repos/mui-org/material-ui/issues/11631/labels{/name}","comments_url":"https://api.github.com/repos/mui-org/material-ui/issues/11631/comments","events_url":"https://api.github.com/repos/mui-org/material-ui/issues/11631/events","html_url":"https://github.com/mui-org/material-ui/issues/11631","id":327475719,"number":11631,"title":"Fixed div inside temporary drawer","user":{"login":"izabelcalabria","id":34099493,"avatar_url":"https://avatars1.githubusercontent.com/u/34099493?v=4","gravatar_id":"","url":"https://api.github.com/users/izabelcalabria","html_url":"https://github.com/izabelcalabria","followers_url":"https://api.github.com/users/izabelcalabria/followers","following_url":"https://api.github.com/users/izabelcalabria/following{/other_user}","gists_url":"https://api.github.com/users/izabelcalabria/gists{/gist_id}","starred_url":"https://api.github.com/users/izabelcalabria/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/izabelcalabria/subscriptions","organizations_url":"https://api.github.com/users/izabelcalabria/orgs","repos_url":"https://api.github.com/users/izabelcalabria/repos","events_url":"https://api.github.com/users/izabelcalabria/events{/privacy}","received_events_url":"https://api.github.com/users/izabelcalabria/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-05-29T20:30:15Z","updated_at":"2018-05-29T20:30:15Z","closed_at":null,"author_association":"NONE","body":"Hi all, first congrats on v1, this project is looking great!\r\n\r\nI searched all issues looking for a similar problem but couldn't find anything related to this. \r\n\r\nSo my situation is: I have a temporary drawer that displays scrollable content and I want a fixed header on top of it. What I found is that using position: fixed on the header should just do the work, and it actually does on every browser but chrome and firefox (it works fine on IE ..... ). \r\n\r\nChrome:\r\nWhat I noticed is that as soon as the drawer is rendered on chrome the paper component has a style applied ( transform: translate(0px, 0px);    transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; ) that is the main culprit of the fixed position not work. \r\n\r\nI've been trying to override all transitions/transforms from the drawer/modal/paper/slider and can't seem to correctly remove the one that is causing this issue (seems to be in the paper component).\r\n\r\nFirefox:\r\nThe header simply doesn't appear at all. \r\n\r\n<!-- Checked checkbox should look like this: [x] -->\r\n- [x] This is a v1.x issue (v0.x is no longer maintained).\r\n- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.\r\n\r\n## Expected Behavior\r\nThe header should be fixed on top of the drawer content while scrolling thru the content.\r\n\r\n## Current Behavior\r\nChrome:\r\nHeader acts as a position: relative because of the transform in the parent node.\r\n\r\nFirefox:\r\nHeader is not displayed.\r\n\r\n## Steps to Reproduce (for bugs)\r\nhttps://codesandbox.io/s/n0xoq1jr5p\r\n\r\nThere was also one weird scenario I couldn't reproduce on sandbox but is happening on my code. Chrome: Basically the behavior is as described above where it won't be position fixed, however when I resize the screen to a smaller breakpoint and try scrolling it starts working fine (if I maximize the screen after this it continues to work). I noticed that after the resizing (I do have a media query to make paper width 50% on larger breakpoint and full width on smaller) the transform is no longer applied to the parent node.\r\n\r\n## Your Environment\r\n\r\n| Tech         | Version |\r\n|--------------|---------|\r\n| Material-UI  | 1.0.0-beta.45  |\r\n| React        |   16.3.2      |\r\n| browser      |   Chrome 63.0.3239.84 (64-bit)     |\r\n| browser      |   Firefox 52.8.0 (32-bit)   |\r\n"}}
{"actor":{"display_login":"izabelcalabria"}}