Incorrect flexbox autoprefixing in iOS

Version

2.0.0-4

Reproduction

I was testing an app in Browserstack with the following configuration:

• iPhone 6S+
• iOS 8
• Safari browser

There was a bug present due to incorrectly prefixed flexbox code. iOS 8 requires -webkit prefixing for flexbox: http://caniuse.com/#feat=flexbox.

My original CSS:

const Wrapper = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
`;

Styled-components turned that block of CSS into the following when loaded on the iOS device:

display: -webkit-box;
display: -webkit-flex; <-- this worked as expected
display: flex;
justify-content: flex-end; <-- Safari disabled this as an invalid style
-webkit-box-align: flex-end; <-- Safari disabled this as an invalid style
align-items: flex-end; <-- Safari disabled this as an invalid style

The correct styling should have been:

-webkit-justify-content: flex-end;
-webkit-align-items: flex-end;

Steps to reproduce

I’m not sure of an easy way to provide a replication for this issue because it requires being run on an actual iOS device. Chrome emulation will not replicate the issue. The CSS blocks above should illustrate the problem well enough.

Expected Behavior

The autoprefixer would apply the correct -webkit autoprefixed styles that iOS 8 requires.

Actual Behavior

Some styles appeared to be autoprefixed with the old Flexbox spec, while others were not autoprefixed at all.

[lnmunhoz]

@ryanheathers I’m still having issue with the prefixes… I updated to styled-components@next but still not working.

How did you manage to fix?

[ryanheathers]

👍 thanks for the quick fix! Really enjoying using your great lib and appreciate the responsiveness of the maintainers.