{"id":521,"date":"2016-03-01T23:06:13","date_gmt":"2016-03-02T04:06:13","guid":{"rendered":"http:\/\/www.bemdesign.com\/wordpress\/?p=521"},"modified":"2016-03-04T23:39:23","modified_gmt":"2016-03-05T04:39:23","slug":"an-interesting-css-flexbox-issue-with-apples-ios","status":"publish","type":"post","link":"https:\/\/www.bemdesign.com\/wordpress\/2016\/03\/01\/an-interesting-css-flexbox-issue-with-apples-ios\/","title":{"rendered":"An interesting CSS flexbox issue with Apple&#8217;s iOS"},"content":{"rendered":"<p>I ran into an interesting issue recently with CSS Flexible Box Layout and Apple&#8217;s iOS Safari (latest version) &#8211; and the issue only occurs on iOS\u00a0 Safari.<\/p>\n<p>Let&#8217;s say you have a parent element with a <code>display: <a href=\"https:\/\/www.w3.org\/TR\/css-flexbox-1\/\" target=\"_blank\">flex<\/a>;<\/code>. And let&#8217;s say some children elements of this parent element also use <code>display: flex;<\/code>. These children elements also use <code><a href=\"https:\/\/www.w3.org\/TR\/css3-values\/#viewport-relative-lengths\" target=\"_blank\">vw\/vh<\/a><\/code> measurements for min\/max width.<\/p>\n<p>And iOS Safari seems to have issues with this &#8211; the layout, for some child elements, went bizarre and iOS Safari seemed to add extra margin to the right pushing the main content in.<\/p>\n<p>So far the only workaround I got is to detect (via <a href=\"https:\/\/modernizr.com\/\" target=\"_blank\">Modernizr<\/a>) if it&#8217;s an iOS device and change my css from <code>display: flex;<\/code> to <code>display: inline-block;<\/code>. It&#8217;s not perfect, there&#8217;s some things I&#8217;d love to figure out better. But for now it does the job.<\/p>\n<p><strong>Addendum:<\/strong> Apparently this is a known (and as yet) unfixed bug: <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=136041\" target=\"_blank\">https:\/\/bugs.webkit.org\/show_bug.cgi?id=136041<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I ran into an interesting issue recently with CSS Flexible Box Layout and Apple&#8217;s iOS Safari (latest version) &#8211; and the issue only occurs on iOS\u00a0 Safari. Let&#8217;s say you have a parent element with a display: flex;. And let&#8217;s say some children elements of this parent element also use display: flex;. These children elements [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,8],"tags":[45,37,46,47],"class_list":["post-521","post","type-post","status-publish","format-standard","hentry","category-design","category-technology","tag-bugs","tag-css","tag-flexbox","tag-ios"],"_links":{"self":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":2,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"predecessor-version":[{"id":523,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/521\/revisions\/523"}],"wp:attachment":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}