search

philipwalton / solved-by-flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
https://philipwalton.github.io/solved-by-flexbox/
MIT License
13.01k stars 1.01k forks source link

Safari 5-6 support for Individual Sizing #14

Open hexalys opened 11 years ago

hexalys commented 11 years ago

Overall Safari 5 and 6 support the flex grid (without flow) though the old box-flex model. But the big bummer is the fixed size, or 'Individual Sizing" as per your demo page, which does not seem to work even if the 'fixed' width percentage is overridden with !important and/or flexis set to none. It seems that it is "flexed" no matter what and ignore the forced width.

If you are thinking of any hackish ways around that issue, that would be great. Otherwise it's use is pretty limited for Safari 5 and 6. Thanks

hexalys commented 11 years ago

I actually now resolved this by applying '-webkit-box-flex' with an css :not() selector with something like this:

.Grid > .Grid-cell:not(.u-1of3){ -webkit-box-flex: 1;/* Safari 3-6*/ }

That way, Safari respect the u-xofx width (as per your syntax), without applying the flexbox model to those boxes, and withouth the need to use 'none !important' or '!important' in those rules. Something you could probably keep in mind to make the css cleaner and preserve Safari compatibility.

hexalys commented 11 years ago

Actually, it turns out your demo is missing the display: -webkit-box; necessary for Safari. That's all there is to it... I got confused there because of it.

You need to add support for the old 2009 model with: display: -webkit-box; display: -moz-box;

philipwalton commented 11 years ago

These properties should be added by autoprefixer, and as far as I can tell, they are. Which specific components are you not seeing them on?

hexalys commented 11 years ago

That's theoretically in the autoprefixer specs AFAIK too. Though your demo site http://philipwalton.github.io/ does not have them, and the site displays the warning: "Your browser does not support Flexbox. Parts of this site may not appear as expected." when browsing with Safari 5.1 or 6. So there is an issue somewhere.

philipwalton commented 11 years ago

The flexbox detection logic simply checks for the presence of the property flex or webkit-flex so that explains why it doesn't work in Safari 5.1 and 6.0. This is what I want because the older box syntax doesn't quite do everything needed for these demos.

If you're seeing something I could add to make it work in older Safari let me know, although I think this is much less of an issue now that Safari 6.1 and 7.0 have been released, which fully support the newest spec.

hexalys commented 11 years ago

It's okay for the context of your showcase I guess. Though IMO autoprefixer should be adding it and saying the Flexbox support is only 'partial', instead of saying it's not supported...

I am working on a 'ready to use' framework with a different approach here, including what the 'box' syntax can handle, for backward compatibility. So in my case, I really need it. I am just using your showcase as a side reference.

philipwalton commented 11 years ago

As far as I can tell autoprefixer is adding it. Unless you can point me to an instance where it's not.

The alert saying flexbox isn't supported is something I'm doing and has nothing to do with autoprefixer. I suppose I could update the alert to say flexbox is only partially supported in those browsers. Maybe I'll do that if I detect support for box or ms-flexbox.