{"action":"created","issue":{"url":"https://api.github.com/repos/webcompat/web-bugs/issues/893","labels_url":"https://api.github.com/repos/webcompat/web-bugs/issues/893/labels{/name}","comments_url":"https://api.github.com/repos/webcompat/web-bugs/issues/893/comments","events_url":"https://api.github.com/repos/webcompat/web-bugs/issues/893/events","html_url":"https://github.com/webcompat/web-bugs/issues/893","id":68008088,"number":893,"title":"twitter.com - layout is messed up","user":{"login":"tagawa","id":94173,"avatar_url":"https://avatars.githubusercontent.com/u/94173?v=3","gravatar_id":"","url":"https://api.github.com/users/tagawa","html_url":"https://github.com/tagawa","followers_url":"https://api.github.com/users/tagawa/followers","following_url":"https://api.github.com/users/tagawa/following{/other_user}","gists_url":"https://api.github.com/users/tagawa/gists{/gist_id}","starred_url":"https://api.github.com/users/tagawa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tagawa/subscriptions","organizations_url":"https://api.github.com/users/tagawa/orgs","repos_url":"https://api.github.com/users/tagawa/repos","events_url":"https://api.github.com/users/tagawa/events{/privacy}","received_events_url":"https://api.github.com/users/tagawa/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/webcompat/web-bugs/labels/firefox","name":"firefox","color":"FF4E00"},{"url":"https://api.github.com/repos/webcompat/web-bugs/labels/needscontact","name":"needscontact","color":"e11d21"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-04-13T05:02:14Z","updated_at":"2015-04-13T18:25:55Z","closed_at":null,"body":"<!-- @browser: Firefox Mobile 37.0 -->\n<!-- @ua_header: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:37.0) Gecko/20100101 Firefox/37.0 -->\n\n**URL**: https://twitter.com/mozilla\n**Browser / Version**: Firefox Mobile 37.0\n**Operating System**: Android 4.4.4\n**Problem type**: Layout is messed up\n\n**Steps to Reproduce**\n1) Log out of Twitter (if logged in).\r\n2) Navigate to: https://twitter.com/mozilla\r\n\r\nExpected Behavior:\r\nA large photo banner of Mozilla staff should be visible.\r\n\r\nActual Behavior:\r\nThe large photo banner does not display. Also the Mozilla avatar/logo overlaps the \"Sign up\" button a bit.\r\n\r\nNote:\r\n@karlcow noticed that it's also broken when spoofing as iPhone/Firefox OS on Gecko desktop, but it works when spoofing as iPhone/Firefox OS on Blink desktop."},"comment":{"url":"https://api.github.com/repos/webcompat/web-bugs/issues/comments/92452042","html_url":"https://github.com/webcompat/web-bugs/issues/893#issuecomment-92452042","issue_url":"https://api.github.com/repos/webcompat/web-bugs/issues/893","id":92452042,"user":{"login":"dholbert","id":426803,"avatar_url":"https://avatars.githubusercontent.com/u/426803?v=3","gravatar_id":"","url":"https://api.github.com/users/dholbert","html_url":"https://github.com/dholbert","followers_url":"https://api.github.com/users/dholbert/followers","following_url":"https://api.github.com/users/dholbert/following{/other_user}","gists_url":"https://api.github.com/users/dholbert/gists{/gist_id}","starred_url":"https://api.github.com/users/dholbert/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dholbert/subscriptions","organizations_url":"https://api.github.com/users/dholbert/orgs","repos_url":"https://api.github.com/users/dholbert/repos","events_url":"https://api.github.com/users/dholbert/events{/privacy}","received_events_url":"https://api.github.com/users/dholbert/received_events","type":"User","site_admin":false},"created_at":"2015-04-13T18:25:54Z","updated_at":"2015-04-13T18:25:54Z","body":"I don't think this is a Gecko bug (or not a known one at least).  This sounds like a Twitter bug.\r\n\r\nIt looks like there's a vertical flex container with two flex items:\r\n * AppPage-bannerImage (an empty div, with a 'height' and a background image)\r\n * AppPage-content (a non-empty div, with \"min-height:100%\")\r\n\r\nIn the flex layout algorithm for a vertical flexbox, honoring \"min-height\" is paramount over everything else. So we're correctly sizing AppPage-content to be 100% of the height of the flex container, and we're shrinking AppPage-bannerImage to its own min-height (of 0), to make room for the other greedy flex item.\r\n\r\nI'm guessing that this works in Chrome because they're treating the percent \"min-height:100%\" as indefinite & hence treating it as the initial value. They *might* be right on this... I'll have to think a bit more about this.\r\n\r\nRegardless, though -- to the extent that \"min-height:100%\" has an effect here, it's a bad effect, so we should suggest that Twitter removes that style."}}