3 ms·

I rebuilt my personal site on Flexbox in December last year after making the call that it was widely supported enough [1]. There were a few hiccups: 1. Safari'

I rebuilt my personal site on Flexbox in December last year after making the call that it was widely supported enough [1]. There were a few hiccups: 1. Safari's requirement to use the webkit- prefix is a pain. Thankfully there are SASS libraries that work around that [2], but you aren't using Flexbox directly. 2. Google's pagespeed tools doesn't support it. It's an ancient version of Webkit -- your mobile score will suffer. If that matters to you, you'll have to do some hacking to ensure that it doesn't affect things on the mobile side. [1] for a personal site. [2] https://github.com/philipwalton/solved-by-flexbox https://github.com/philipwalton/solved-by-flexbox

bonn1 12y ago
re 2.: sure? And did you try it with the new Google Mobile Freindly Test too?
- mmastrac 12y ago
  Definitely sure. It supported it just marginally enough to mangle it in a way that you couldn't work around. My fix was to literally check if the floating sidebar overlapped the content and, if so, add a css class to the body that I could use to fix the pagespeed insights browser. I'll give the Mobile Friendly Test a shot with and without the hack. Edit: Yup, still busted. And the new test is broken as well (probably using the same backend). This is what it looks like: http://imgur.com/fBIP80y http://imgur.com/fBIP80y
  - markdown 12y ago
    That's scary, given that in April, Google will start using mobile-readiness in its ranking algo.
  - Throwaway90283 12y ago
    I run a popular site that heavily uses flexboxes, with dozens of flex containers on every page, different alignments, etc. I just checked pagespeed insights, and the site renders fine in the little mobile phone preview from your image, so it's definitely supported. Check your code, it might be incorrect, you might need webkit prefixes, or you might be using outdated flexbox specs that have been dropped.

bonn1 12y ago

re 2.: sure? And did you try it with the new Google Mobile Freindly Test too?

mmastrac 12y ago
Definitely sure. It supported it just marginally enough to mangle it in a way that you couldn't work around. My fix was to literally check if the floating sidebar overlapped the content and, if so, add a css class to the body that I could use to fix the pagespeed insights browser. I'll give the Mobile Friendly Test a shot with and without the hack. Edit: Yup, still busted. And the new test is broken as well (probably using the same backend). This is what it looks like: http://imgur.com/fBIP80y http://imgur.com/fBIP80y
- markdown 12y ago
  That's scary, given that in April, Google will start using mobile-readiness in its ranking algo.
- Throwaway90283 12y ago
  I run a popular site that heavily uses flexboxes, with dozens of flex containers on every page, different alignments, etc. I just checked pagespeed insights, and the site renders fine in the little mobile phone preview from your image, so it's definitely supported. Check your code, it might be incorrect, you might need webkit prefixes, or you might be using outdated flexbox specs that have been dropped.