Comments (7)
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.
from solved-by-flexbox.
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;
from solved-by-flexbox.
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?
from solved-by-flexbox.
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.
from solved-by-flexbox.
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.
from solved-by-flexbox.
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.
from solved-by-flexbox.
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
.
from solved-by-flexbox.
Related Issues (20)
- guide ? HOT 2
- How to make contaienr responsive .container has certain width and height but not responsive
- Safari 10.1.2 don't handle responsive grate
- flexboxiisue
- Sticky footer and sidebar HOT 1
- Sticky footer corrupts printing in Firefox and probably IE HOT 1
- Anybody notice 'Promise' undefined javascript error in sticky footer demo site HOT 1
- Sticky footer example doesn't mention html height 100% HOT 6
- IE11: Image width 100% results in space below grid HOT 2
- Keypad overlaps the input box.
- Input Addon Component - Please add max-width: 0; to input css class
- dependency 'natives' is locked to a version which crashes with nodejs 10 HOT 2
- Vertical Centering doesn't work HOT 1
- Very small nitpick with Sticky Footer HOT 1
- Viewing the site locally HOT 2
- Add dark theme
- Request for French Translation
- Solve by Firefox
- primordials is not defined
- Try to align items to bottom and left ...
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from solved-by-flexbox.