CODEWITHSUNDEEP
htmlcsswebkitflexbox
Kevin Cooper
Kevin Cooper

Reputation: 5395

-webkit-flex not displaying properly on Android

After realizing the wonderful abilities of display:flex, I made a web page that looks exactly how I want it to when viewed from Chrome 26 on Windows. However, it doesn't work in Chrome 26 on my Android, nor does it work in the Android browser 4.1 in my emulator. According to caniuse, all of these browsers should support it.

Perhaps coincidentally, the way it looks in Android appears (as far as I can tell) to be the same as what it looks like when I switch to the older version display:box.

Here is what it looks like in Windows vs. Android:

windows vs android

My question is, how can I prevent these cross-device issues? Perhaps using something other than flex until it becomes more standard would be better. Can anyone provide me a working example that doesn't use flex, or that works on Android? This is for a mobile web app. Any help is much appreciated. Links to my code are below.

With -webkit-flex: JSFiddle

With box: JSFiddle

Upvotes: 9

Views: 13415

Answers (2)

Kevin Cooper
Kevin Cooper

Reputation: 5395

For those curious, I ended up completely rewriting my code to not use flex. Here is a link to the JSFiddle that works just fine for my purposes. http://jsfiddle.net/8juSk/

It uses box and box-ordinal-group as suggested by @cimmanon.

Upvotes: 1

cimmanon
cimmanon

Reputation: 68339

There are 3 Flexbox drafts with different properties/values to be aware of. Caniuse only makes the distinction between browsers who support the current draft ("support") vs those who support either of the older drafts ("partial support").

To maximize browser support, you just include all of them going from oldest to newest versions.

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.bar {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

While all Android versions currently support the old 2009 properties, they will likely be dropped in the future in favor of the standard properties. Also note that Blackberry 10 is listed as supporting the current standard, not either of the old drafts.

Upvotes: 9

Related Questions