Flexbox code working on all browsers except Safari. Why?
Flexbox is a CSS3 technology. This means it's relatively new and some browsers don't provide full support for flex properties.
Here's a run-down:
IE 8 and 9 do not support flexbox. If you're wanting to use flex properties in these browsers, don't bother wasting your time. A flexbox polyfill made the rounds for a while, but it didn't work well and is no longer maintained.
IE 10 supports a previous version of flexbox and requires vendor prefixes. Be aware that certain properties from the current spec aren't supported in IE10 (such as
flex-grow
,flex-shrink
andflex-basis
). See the Flexbox 2012 Property Index.IE 11 is good, but buggy. It's based on the current flexbox standard. See the KNOWN ISSUES tab on this page for some of the problems. Also see: flex property not working in IE
With Chrome, Firefox and Edge you're good all around. You'll find minor bugs and inconsistencies but there are usually easy fixes. You'll need to be aware of Implied Minimum Flex Sizing, which sometimes causes sizing and scrollbar problems.
Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require
-webkit-
prefixes. Sometimesmin-width
andmax-width
cause alignment problems which can be resolved withflex
equivalents. See Flex items not stacking properly in Safari
For a complete review of flexbox browser support, see this page:
http://caniuse.com/#search=flex
For a quick way to add many (but not necessarily all) vendor prefixes use Autoprefixer. For Safari, see this article for -webkit-
prefixes that some prefix generators don't include.
For a list of common flex bugs and their workarounds see Flexbugs.
Also, on this site, there's:
- Flexbox Tag Info
Flex property not working in Safari browser
Try this style display:-webkit-flex
similarly for all the browser use below css
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
Your code
.rq-search-container {
position: relative;
width: 100%;
background: #fff;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
flex-direction: row;
align-items: flex-start;
border-radius: 2px;
/*box-shadow: 0px 0px 28px 5px rgba(0, 0, 0, 0.3); margin-top: 45px;*/
z-index: 30;
}
css display flex not working properly on chrome and safari
I strongly suggest you not use flexbox, but floats instead.
Delete all the flex properties your css should look like this:
#services{
background-image: url(img/Services-background.jpg);
overflow: auto;
}
.services-container {
color: #d6d6d6;
width: 30%;
float: left;
margin: 1%;
}
Then you can add the rest of the styling. It will work on all browsers.
Why is flexbox code not working in Safari 5 and 6?
Safari versions prior to 6.1 support a previous version of the flexbox specification (source).
For Safari 5.0, 5.1 and 6.0, in addition to display: -webkit-box
(which is the display: flex
of that time), you need to use the -webkit-box-orient
property.
This tells the flex container how to align its children.
The initial value is inline-axis
. Try using vertical
or horizontal
.
This is the section in the spec with the details:
https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation
More details here: Flexbox code working on all browsers except Safari. Why?
Flexbox not working (wrapping) as expected in Safari
It looks like the issue is causes by the :before/:after pseudo elements being rendered as 'solid' or having some form of content. So setting width: 0;
or content: normal;
seems to resolve the issue.
So on the container the CSS (scss) would be:
.mosaic {
@include clearfix;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 $vertical-spacing;
padding-left: 0;
width: 100%;
&:before,
&:after {
content: normal;
}
}
Hope that helps someone else! A very annoying and frustrating bug! :)
Related Topics
Html:How to Make a Curve Like This Using HTML & CSS Using Border or Box
Disable Blue Highlight When Touch/Press Object With Cursor:Pointer
Force HTML Content to Fit in Device Width With Wkwebview
How to Set Input Field With Current Date in Angular
Html and CSS Are Not Linking/ Communicating
Space Between Navbar and the Content
How to Make My Website Fit Any Screen Size
How to Change the Time Format (12/24 Hours) of an <Input>
Html/Javascript One Click Print (No Dialogs)
How to Make a Gap Between Two Div Within the Same Column
Making Div Visible or Invisible Depend on Condition
Html - How to Scroll Vertical in Select Box
How to Save User-Entered Line Breaks from a Textarea to a Database
How to Disable Viewport Zooming on Mobile Safari
Html5 Number Input - Always Show 2 Decimal Places
Angular 5 File Upload: Failed to Set the 'Value' Property on 'Htmlinputelement'