{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3742","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3742/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3742/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3742/events","html_url":"https://github.com/Automattic/wp-calypso/pull/3742","id":138033548,"number":3742,"title":"Move to flexbox layout","user":{"login":"beaucollins","id":19795,"avatar_url":"https://avatars.githubusercontent.com/u/19795?v=3","gravatar_id":"","url":"https://api.github.com/users/beaucollins","html_url":"https://github.com/beaucollins","followers_url":"https://api.github.com/users/beaucollins/followers","following_url":"https://api.github.com/users/beaucollins/following{/other_user}","gists_url":"https://api.github.com/users/beaucollins/gists{/gist_id}","starred_url":"https://api.github.com/users/beaucollins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/beaucollins/subscriptions","organizations_url":"https://api.github.com/users/beaucollins/orgs","repos_url":"https://api.github.com/users/beaucollins/repos","events_url":"https://api.github.com/users/beaucollins/events{/privacy}","received_events_url":"https://api.github.com/users/beaucollins/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20In%20Progress","name":"[Status] In Progress","color":"207de5"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2016-03-03T00:16:21Z","updated_at":"2016-03-04T10:54:57Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/3742","html_url":"https://github.com/Automattic/wp-calypso/pull/3742","diff_url":"https://github.com/Automattic/wp-calypso/pull/3742.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/3742.patch"},"body":"Position fixed should most likely be considered deprecated. At the very least we need to review where position fixed is being used and whether moving to flexbox will mess it up."},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/192231497","html_url":"https://github.com/Automattic/wp-calypso/pull/3742#issuecomment-192231497","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3742","id":192231497,"user":{"login":"jasmussen","id":1204802,"avatar_url":"https://avatars.githubusercontent.com/u/1204802?v=3","gravatar_id":"","url":"https://api.github.com/users/jasmussen","html_url":"https://github.com/jasmussen","followers_url":"https://api.github.com/users/jasmussen/followers","following_url":"https://api.github.com/users/jasmussen/following{/other_user}","gists_url":"https://api.github.com/users/jasmussen/gists{/gist_id}","starred_url":"https://api.github.com/users/jasmussen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasmussen/subscriptions","organizations_url":"https://api.github.com/users/jasmussen/orgs","repos_url":"https://api.github.com/users/jasmussen/repos","events_url":"https://api.github.com/users/jasmussen/events{/privacy}","received_events_url":"https://api.github.com/users/jasmussen/received_events","type":"User","site_admin":false},"created_at":"2016-03-04T10:54:57Z","updated_at":"2016-03-04T10:54:57Z","body":"Tested on iOS.\r\n\r\nWorked well overall. Weirdly did not seem to suffer from the \"sites-selector\" component overlaying \"My Sites\". Did notice a few things, though.\r\n\r\nLike Chrome on Android, the Safari toolbar \"collapses\" a bit into a minimal version when you scroll. Also similar to on Android, the move to flexbox prevents this from happening. Also on iOS, I prefer this new behavior with the Safari toolbar not collapsing (I hate that feature), however mentioning it still since it's also technically a regression. We need to decide whether we're cool with it or not, as a group.\r\n\r\nThere's a weird issue with iOS momentum scrolling, which I believe @beaucollins has mentioned as well. If you start dragging the main content to scroll, you scroll that just fine, with momentum scrolling and everything. If you start that scroll on the toolbar, or another flex-fixed-positioned element, instead of scrolling the content, you scroll the **page itself**, with the content locked and the masterbar being pulled down by the overscroll bounce.\r\n\r\nHere's a screenshot of normal content scroll, invoked by a swipe that never touches the masterbar:\r\n\r\n![normal scroll](https://cloud.githubusercontent.com/assets/1204802/13525159/a14a65f4-e1ff-11e5-83b3-ede3f71f6ab9.png)\r\n\r\nHere's a screenshot of the page scroll, invoked by starting the scroll swipe from the masterbar:\r\n\r\n![page-scroll](https://cloud.githubusercontent.com/assets/1204802/13525168/ae78243c-e1ff-11e5-9b6a-ba1f720a14c9.png)\r\n\r\nWe may need to disable some of the flex stuff on the mobile breakpoint, to address this. It feels very broken otherwise. Would it be enough to pull the masterbar out of the flex layout at the <480px breakpoint? Or can we do something with `pointer-events` to prevent the scroll swipe from affecting the main page?"}}