Firefox iOS flex getting removed from styles

[IanCStewart]

Flex isn't getting passed in iOS firefox browser.

Elements within a flex container with styles: { flex: 1 } won't grow as expected.

Might be an issue within inline-style-prefixer

[ryan-roemer]

I'm guessing it's ISP, since we straight proxy that. Can you check upstream for us? Thanks!

[IanCStewart]

I have opened an issue upstream robinweser/inline-style-prefixer#155

[jarrett-pon]

This seems to be inline-style-prefixer issue. I have posted in the same issue created by @IanCStewart:

I have a similar issue while using FormidableLabs/radium. The problem occurs on iOS firefox and seems to depend on user agent. User agent where the problem occurs is: Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) FxiOS/10.6b8836 Mobile/14G60 Safari/603.3.8. Example of input css is display: flex; flex-direction: row; with output of display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-direction: normal;. I expect the input css to work as intended on iOS/firefox.

[IanCStewart]

it looks like the upstream issues was closed => rofrischmann/inline-style-prefixer#155

rofrischmann commented 17 hours ago
With the new version (5.0.0) we completely dropped dynamic support due to increasing issues and burden it brings to keep everything up-to-date and in sync.
Therefore I'm closing this issue right now.

[kylecesmat]

It looks like ISP no longer supports dynamic vendor prefixing as of version 5.0.0, which Radium relies on. We will need to either consider this as wontfix or look towards a different solution for auto-prefixing.

[tonyhallett]

The dynamic prefixer determines browser name is firefox with browser version 10.6. The dynamic prefix data for firefox does not have an entry for flex and so no prefixing.

It could be possible to handle cases like this with an additional radium config property, mapUserAgent.

prefix-plugin.js ( other paths to the prefixer to be considered )

export default function prefixPlugin(
          {config, style}: PluginConfig
        ): PluginResult {
          const newStyle = getPrefixedStyle(style, config.userAgent,config.userAgentMapper);
          return {style: newStyle};
        }

prefixer.js

export function getPrefixedStyle(style,userAgent,userAgentMapper){
        ..
        const prefixer = getPrefixer(userAgent,userAgentMapper);
        ..
      }
function getPrefixer( userAgent, userAgentMapper) {
        userAgentMapper = userAgentMapper ? userAgentMapper : (ua)=>ua;
        const actualUserAgent =
          userAgent || (global && global.navigator && userAgentMapper(global.navigator.userAgent));
        ....