Menu icon Foundation
-webkit-flex property not working in safari

While using Maverick OS on a MacBook Air in Safari, properties attached with prefix -webkit is not functioning properly. It's present in the stylesheet but when we access in above specification it is not visible in styles, hence, page breaks completely.

FlexpropertycssMaverick OSmacbookSafari

While using Maverick OS on a MacBook Air in Safari, properties attached with prefix -webkit is not functioning properly. It's present in the stylesheet but when we access in above specification it is not visible in styles, hence, page breaks completely.

Rafi Benkual about 2 years ago

 There should be a autoprefixer pipe in the gulpfile that adds the vendor prefixes. Are you not seeing them in the browser?

Rucha about 2 years ago

We changed gulpfile as follow:

.pipe($.autoprefixer({

          browsers: ['last 2 versions', 'safari 5', 'ie 8', 'ie 9', 'ie 10', 'opera 12.1', 'Firefox ESR']

}))

But still it's not working for me. The styles related to display property strikes out.

Brian about 2 years ago

ZURB has basically dropped support for this framework and it is now being maintained in angular-base-apps.

This bug has been fixed in that repo: https://github.com/base-apps/angular-base-apps/issues/5

chirag 7 days ago

hello

 

chirag 7 days ago

safari flex css is not working !  please help me

chirag 7 days ago

          browsers: ['last 2 versions', 'safari 5', 'ie 8', 'ie 9', 'ie 10', 'opera 12.1', 'Firefox ESR']

Rucha 7 days ago

Flex property does not have support for 'safari 5', 'ie 8', 'ie 9', 'ie 10'.

You can add following prefixes for flex property:

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

 

Rucha 7 days ago

Flex property does not have support for 'safari 5', 'ie 8', 'ie 9', 'ie 10'.

You can add following prefixes for flex property:

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

 

Rucha 7 days ago

Flex property does not have support for 'safari 5', 'ie 8', 'ie 9', 'ie 10'.

You can add following prefixes for flex property:

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;