flexbox percentage removed

[futtta]

{flex: 1 1 0%} is optimized into {flex:1 1 0}, which is not rendered the same in Chrome.

Cfr. Autoptimize support topic on https://wordpress.org/support/topic/google-chrome-css-flex-1-1-0-is-not-the-same-as-flex1-1-0

frank

[damienmckenna]

This also converts {flex: 1 0 0px} to {flex: 1 0 0}, which breaks IE11.

[damienmckenna]

The problem appears to be fixed in the latest chrome, it doesn't mind about the missing units anymore.

[damienmckenna]

The commit from @futtta may fix the percentage issue, but it doesn't fix the general units issue.

[futtta]

do you have example CSS for that @damienmckenna? I'll be happy to improve :-)

[damienmckenna]

How about something as simple as the following:

.child { flex: 1 0 0px; }

[damienmckenna]

@futtta, the latest code in your fork appears to resolve this, would you mind putting together a PR of just this fix so we could review it and make it easier to be included? All that's needed are these two bits:

        // Preserve flex, keeping units even if 0.
        $css = preg_replace_callback('/flex\s?:\s?((?:[0-9 ]*)\s?(?:px|em|auto|%)?(?:calc\(.*\))?)/i', array($this, 'replace_flex'), $css);

    private function replace_flex($matches)
    {
        $this->preserved_tokens[] = trim($matches[1]);
        return 'flex:'.self::TOKEN . (count($this->preserved_tokens) - 1) . '___';
    }

Thanks.

[futtta]

@damienmckenna; PR #30 created

[damienmckenna]

@futtta: Excellent, that PR covers it!

[tubalmartin]

Fixed in v2.4.8-p7 release. Thank you guys!