Flex/block element not displaying on Safari

Question

I'm developing this site and the first slider at the top is not displaying at all on Safari. I only have an iPad so I can't check whether it is hidden or has 0 height, but I have had problems with flex and Safari before, where I believe flex elements have 0 height. I've now changed the element (.fs-default .slides) to display: block, and tried clearing the cache on the iPad, but it still isn't showing. It could be a caching issue.

I have a feeling there is a general issue with display: flex elements having 0 height on Safari, but I haven't found anyone else with the same issue.

Here are the styles I am adding to the slides element:

.fs-default .slides {
  height: 500px;
  display: block;
  min-height: 60vmin;
  align-items: center;
}

The structure of the slider and slides is like this, where each li is a slide.

<div class="fs-default">
  <div>
    <ul class="slides">
      <li>
        <img>
      </li>
      <li>
        <img>
      </li>
      <li>
        <img>
      </li>
    </ul>
  </div>
</div>

As I cannot pinpoint the issue, it is hard to know what to include in this question so I'll link to the website too, in case the issue is somewhere else. http://dev.physelec.com.au/

http://codepen.io/anon/pen/qrRVew Here is a pen of me trying to show the problem. It isn't the same issue as the website, strangely.

[Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/q/35137085/3597276) — Michael Benjamin, Mar 09 '17 at 02:54
Have you tried adding -webkit-box- before the selectors you think aren't working? — Larpee, Mar 09 '17 at 02:57
@Michael_B It says Safari 9 supports the current flexbox spec - therefore this is a bug. I'm looking for a workaround. (Just getting them to display at all would help) — Chris Cook, Mar 09 '17 at 03:38
@ChrisCook, my answer there provides more than just browser support data. There's a reference to flex bugs. There a link to another post which may be related. — Michael Benjamin, Mar 09 '17 at 03:51
You should add enough code to your question that would reproduce the problem. That would help us help you more effectively. — Michael Benjamin, Mar 09 '17 at 03:53
I have looked through flexbugs and this issue doesn't seem to be there, but it is hard to pinpoint without dev tools. I'll try to make a pen to reproduce the issue. — Chris Cook, Mar 09 '17 at 04:06
@ChrisCook I disabled all of of the `flex` and `display: flex` lines on `header` and `.main-content-area` and the carousel looks fine to me on Safari. I don't think that's necessary, and I think it's your use of the `flex` shorthand where you're specifying `0` for `flex-basis` (the 3rd value). — Michael Coker, Mar 11 '17 at 17:24
@MichaelCoker could you write an answer with your changes? I'd love to test it. — Chris Cook, Mar 12 '17 at 02:45

score 0 · Accepted Answer · answered Mar 12 '17 at 03:02

0

If you undo flex and display: flex on header and .main-content-area, the layout works in Safari. I don't think those properties are necessary, and I think it's your use of the flex shorthand where you're specifying 0 for flex-basis (the 3rd value).http://codepen.io/anon/pen/evWVaY

answered Mar 12 '17 at 03:02

Michael Coker

52,626
5
64
64

Worked a charm. Bonus points if you can tell me a syntax that will correctly display flex elements in Safari? It says it is fully supported. – Chris Cook Mar 14 '17 at 01:50
@ChrisCook awesome. Flex does work in the latest versions just fine... what specifically isn't working? Wrote this really quickly. http://codepen.io/anon/pen/evWVaY – Michael Coker Mar 14 '17 at 01:53
Flex elements with flex-direction: column have 0 height, instead of expanding to fit their contents. – Chris Cook Mar 14 '17 at 03:32
@ChrisCook just put this in safari, seems fine. http://codepen.io/anon/pen/evWVaY give me a demo please. – Michael Coker Mar 14 '17 at 03:39
http://codepen.io/anon/pen/zZzVqx This shows the problem. Maybe it is something about nested flex. – Chris Cook Mar 14 '17 at 04:12
@ChrisCook can you tell me exactly what you're trying to do with the flex shorthand `flex: 1 1 0%`? I think it's your use of the shorthand property that messed up your other layout, but your other layout didn't seem to need flex at all. `0%` and `0px` are treated differently in `flex-basis`. Why are you even specifying thator `flex-shrink` or `flex-grow` in this layout? None of those properties seem necessary and I'm assuming one or more of them doesn't do what you think it does. http://codepen.io/anon/pen/xqrorE behaves the same in safari & chrome & ff and nests flex elements – Michael Coker Mar 14 '17 at 04:23
I'm using that syntax as that is the only one to work properly on IE, and until now didn't have any adverse side effects. I'll stick with an IE style fill-in and go with a different syntax for everything else from now on. – Chris Cook Mar 14 '17 at 04:47
@ChrisCook Well, specifying those things has repercussions, because obviously they have specific uses. And FWIW, I don't have to use those as any sort of default formula to make flex work in IE. There are a few bugs in IE 10/11, but you don't necessarily have to specify `1 1 0%` to make it work. The closest thing I can think of is in IE10, `flex` is `0 0 auto` rather than `0 1 auto` as defined in the latest spec. You can read more about the known issues here http://caniuse.com/#feat=flexbox – Michael Coker Mar 14 '17 at 04:55
Yes, I've looked at using auto instead, but that changes the sizing of elements from being equally sized. I think the best solution for what I want (equally spaced, evenly sized, and allows for the flex positioning for centering) is to use 1 1 0px/0 0 0px and then just have an IE specific stylesheet. Thanks for the help. – Chris Cook Mar 14 '17 at 05:40

Flex/block element not displaying on Safari

1 Answers1