Flex-layout: layout not working in Safari v8

Created on 15 Apr 2017 · 8Comments · Source: angular/flex-layout

According to http://caniuse.com/#feat=flexbox there are many browser versions which just support flexbox with a prefix. Currently we can see that the layout is not working in Safari 8. Is this a bug or does the project not support prefixes? 97% of all browsers would be ok for our project, 86% not really.

Source

karlhaas

Most helpful comment

@ThomasBurleson why does the project not support browsers which need a webkit prefix?

karlhaas on 18 Apr 2017

👍2

All 8 comments

Evergreen browsers do not include S8. See

http://caniuse.com/#feat=flexbox

ThomasBurleson on 16 Apr 2017

@ThomasBurleson why does the project not support browsers which need a webkit prefix?

karlhaas on 18 Apr 2017

👍2

Maybe just https://github.com/angular/flex-layout/blob/master/src/lib/utils/auto-prefixer.ts#L18 causes the issue.
I will provide a PR (https://github.com/angular/flex-layout/compare/master...karlhaas:fix-display-prefixes) if it works on Safari 8.

karlhaas on 18 Apr 2017

Thx @karlhaas. Is this legal:

switch (key) {
      case 'display':
        if (value === 'flex') {
          target['display'] = [
            '-webkit-box',
            '-moz-box',
            '-ms-flexbox',
            '-webkit-flex',
            'flex'
          ];
        } else {
          target['display'] = value;
        }
        break;

ThomasBurleson on 18 Apr 2017

@ThomasBurleson I found this solution here

karlhaas on 18 Apr 2017

👍1

@ThomasBurleson it works in iOS8 now. PR: https://github.com/angular/flex-layout/pull/276

karlhaas on 4 May 2017

@ThomasBurleson see https://github.com/angular/material2/issues/4385#issuecomment-306304467

karlhaas on 6 Jun 2017

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}