I have a strange css problem that appears to exist only in Safari.
I have rows of 5 boxes. There is no attempt to make this responsive, each box is 160px wide and they fit within a set width container of 900px.
See here: http://bit.ly/1rs97IB
In Safari only, when a box title wraps onto two lines, the whole box is pushed upwards outside of the row. This does not happen within IE, Opera, Firefox or Chrome. Can anyone work out what might be causing this and suggest an approach to fixing it? It's driving me a bit nuts...
After a lot of experimenting I came up with this: Change the display to flex for two of the containers.
.post_gallery_row {
margin-bottom: 21px;
padding-bottom: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.post_gallery_item {
width: 160px;
margin-right: 21px;
margin-left: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
I have no idea what specifically caused the error, but this is something atleast and I hope it helps.
Related
I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue:
The flex box css is:
.equal-height {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
}
The child elements are set to the following:
.child-div {
float: left;
display: block;
width: 33.3333%;
box-sizing: border-box;
}
But they I have noticed that they are computed with no float
file: style.css;
line: 1028
.row:before, .row:after{
content: " ";
display: table;
}
add:
width: 100%
and now the "margin" is solved.
The grid system you used has problems with safari: change it.
Hope I've helped you.
I've noticed this as well. Here's what worked for me:
.row:before, .row:after {
display: none;
}
The reason they are computed with no float is that flex cancels them.
As per flexbox spec:
float and clear have no effect on a flex item, and do not take it
out-of-flow. However, the float property can still affect box
generation by influencing the display property’s computed value.
So 100% width on the flex container as per Michael is ok, but if you want flexbox, what you want is:
.child-div {
width: 33.3333%;
box-sizing: border-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
i.e. You need to use either floats or flex, but not both.
You may want to have a look at this flexbox generator to understand how flex works.
I am using Flexbox for a series of content blocks. The idea is to have blocks in a flex container whose height will be determined by the total of the flex items within it. This is working well on Chrome and Safari as it calculates the container height automatically and correctly, but the same does not happen on Firefox + IE. My CSS looks like this:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.primary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 56.25%;
margin-bottom: 10px;
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
.secondary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 28.10026385%;
flex: 2 1 40%;
margin-left: 10px;
}
}
Essentially, the padding-top: 28.1% decoration is for a background image set as an inline style. On chrome + safari, this calculates the height just fine. However, the container's height is not set up on IE + FF. I have tested all my browser prefixes and checked a lot of questions, but I'm a bit lost on why the height is calculated differently. If anyone has any suggestions that would be excellent. Setting a min-height on the blocks is not an option, as we will have varying sizes of blocks, so we don't want to constrain ourselves to a fixed or min height.
Short version: is there a difference in how Firefox + IE calculate height of flex containers and items? If so, what is the best way to get it to behave like Safari + chrome?
Here is a contrived example: http://codepen.io/anon/pen/NGjYGR
I'm noticing a few potential issues with the code you're referencing. Also, without full context of the referenced code—missing HTML—recommendations are based on the assumption that your HTML is structured in the following manner:
.container
.primary
.secondary
No height set on .container
If dimensions aren't set on this element how are the dimensions calculated for the children elements (i.e.: "28.1%" of ?) ?
There are many known issues with certain browser implementations of the flex specification
There are known issues with implementations flex-basis, and height calculations. Here is a comprehensive article on browser nuances on flex: here.
References:
Normalizing Cross-browser Flexbox Bugs:
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
When I add
display: flex;
To my container div, autoprefixer (I'm using Grunt with "grunt-autoprefixer": "^3.0.3") adds:
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
The problem is, my layout breaks in Safari with
display: -webkit-box;
If I leave it display: -webkit-flex all is well. Any thoughts on how to disable this?
The original poster kind of answered this in their comment, but just to review, Safari (8 anyway) wants -webkit-flex, which autoprefixer isn't spitting out depending on your settings (or maybe at all, I didn't actually try tinkering with the settings). If your CSS looks like:
display:flex;
display:-webkit-flex;
it seems to fix it, as the autoprefixer output will now be:
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
Same for any other flexbox properties, so:
display:flex;
display:-webkit-flex;
flex-direction:column;
-webkit-flex-direction:column;
justify-content: center;
-webkit-justify-content:center;
My website is http://www.parentcenterhub.org/region6-aboutus/ This page is displaying correctly in Google Chrome. But, the layout is messed up for Internet Explorer and Firefox. I think this is CSS issue. The CSS code is
#primary { display: -webkit-box; // or display: flex; }
.entry-content img.alignleft {margin-left: 0px !important;}
.custom_list { float: right; display: inline-block;
width: 30%;
list-style-type: none; }
-webkit-box will only work in webkit browsers - which Firefox/ IE are not. You need to specify the vendor prefixes for it to work in all modern browsers.
#primary {
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
This however won't work on older versions of IE (as with everything else..). Check here http://caniuse.com/flexbox for information on what versions of browsers support this property.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What are the differences between display:box and display:flexbox
I have read a css3 flex-box demo here,the parent element's style is :
.flexbox {
display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
width: 50%;
height: 100px;
background: orange;
}
Once I change the display: -webkit-flexbox; to display: -webkit-box;, the page layout have changed.
Buy I read some tutorial about the -webkit-flexbox and -webkit-box just is the same syntax.Is that true? Are there some differences between them?
According to this source the specs have changed:
The Working Draft has undergone changes to much of the syntax used in the flexbox model. For example:
display: box;
This will become:
display: flexbox;
Both versions of the syntax work (at least in chrome). The reason why the layout looks different if you change the display style is because you have to change -webkit-flex-pack: center; to -webkit-box-pack: center; when you use display: -webkit-box;
So this is equivalent to your css style from above and should produce the same layout:
.flexbox {
display: -webkit-box;
-webkit-flex-box: center;
-webkit-flex-box: center;
width: 50%;
height: 100px;
background: orange;
}