Bug 6 brokes layout in Safari

[Kout]

It seems to me, that Safari does not like zero percentage unit. In column direction, this rule

.foo { flex: 1 1 0%; }

makes the element shrink completely, creating overlap. Changing % to px helps to get desired behaviour.

[luisrudge]

Damn.. it shouldn't make difference. I guess they're right, safari is the new IE 😝
Can you send a PR to fix this?

[Kout]

Definitely, Safari is getting there. The bug is even in the newest 10.1.

I am not sure if I am able to send PR, I have never worked on postcss plugin. 😟

But it seems to me, it's all about this line. So I will try it.

[alexander-akait]

@Kout just show what your expected and actually and i can do PR

[Kout]

Thanks @evilebottnawi very appreciated, I am currently very busy and the issue needs proper testing to prevent any unexpected behaviour in other browsers. The issue is limited to flex-direction: column;.

I am testing on virtualized IE11 (vie modern.ie) and the browser acts funny, changing the property in devTools fixes is it up, hower same value in source CSS has no effect.

Safari I test on BrowserStack, and there it seems, Safari likes all variants (short or long), but not 0% for flex-basis.

I am afraid, I see no combination to satisfy all browsers at once.

[adrienharnay]

Hi, glad this problem has been found, spent too much time searching where this bug was coming from!

Good work!

[subdigit]

How about just omitting the basis value? I know that goes against the point of the plugin, but at the moment, it's broken without a satisfying solution for all browsers if the basis has to be strictly defined.

[luisrudge]

fixed in version 3.1.0