Display:Flex not supported in Safari?

Question

The drop down menus on this site fire off on hover, and then when active, they appear horizontally by using 'display: flex;' in CSS. Can't figure out how to get this to work with Safari though. It works in Chrome, but not Safari.

www.soakandswim.com/wp/pools <--for reference.

Any insight? Thanks!

It works on Safari 7.0 only by `-webkit` prefix http://caniuse.com/#feat=flexbox — Hashem Qolami, Mar 14 '14 at 21:57

score 3 · Accepted Answer · answered May 18 '15 at 22:54

3

Some browsers do not fully support all the CSS3 elements. Try this:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

answered May 18 '15 at 22:54

ninjaPixel

6,122
3
36
47

`display: -webkit-flex;` fixes thing for OS X Safari. Is there a fix for mobile? – Kees de Kooter May 20 '15 at 08:20
1

For mobile Safari you have to prefix `-webkit` to the additional properties, e.g. `-webkit-align-items: center;` – Kees de Kooter May 20 '15 at 10:55

Display:Flex not supported in Safari?

1 Answers1

Linked