Modernizr says flex-wrap is supported in UC on Android

[ethanroday]

Modernizr does not seem to detect that flex-wrap is not supported in UC Browser for Android (http://caniuse.com/#search=flex).

With the following CSS, the background color of a page loaded in UC does not change:

.mod-no-flexwrap body {
    background-color: red;
}

Similarly, with .mod-flexwrap, the background color does change where it shouldn't.

(I am using the following custom build: https://modernizr.com/download/?-flexbox-flexwrap-setclasses-cssclassprefix:mod-)

[ethanroday]

Just to add to the confusion, UC says it does support flex-wrap:

var wrapIsSupported = document.createElement("div").style.flexWrap !== undefined;
//wrapIsSupported is true

[patrickkettner]

hey @ethanroday!
Are you using testing US Browser or UC Browser mini?

[hexalys]

@patrickkettner
It's for UCWeb Android (the U3 Engine). They somehow expose newer Webkit properties w/o the support.

FYI: I have managed to solve this by discarding flexBasis or flexWrapwith:
('CSS' in win && 'supports' in CSS)

I myself rely on a detect of UCWeb to be sure. However I think it could work for you without it, since CSS.supports matches or prerequisite flexWrap support in others browsers. Otherwise, it may fall as undetectable for Modernizr.

[patrickkettner]

Thanks for the info @hexalys!

Otherwise, it may fall as undetectable for Modernizr.

We would just need to flex-wrap something with a known width and height and check the height of the container element
.

[hexalys]

Ah yeah, you could do that too. :) It seems too expensive, for my taste anyway.

[patrickkettner]

we do it in a number of places. some folks need accuracy

[ethanroday]

@patrickkettner Seeing a meme in a Github issue thread rather made my day. Seems like @hexalys answered your question, but let me know if you need any more information from me.

[patrickkettner]

@ethanroday we are good! :]

Going to see if UC could possibly change their behavior, and if not we will update our code accordingly