Problems using flexbox on Android 4.4.2

Question

I have inherited some flexbox code that's been running fine in iOS using Cordova. We're now trying to deploy to Android, supporting KitKat and above.

I have some flexbox code that works fine in Android 4.4.4, 5.X, and 6.X but fails in 4.4.2. I have an HTC One Mini running 4.4.2 and have tried it on a couple of other 4.4.2 machines with the Amazon Device Farm. I've read that there are some known problems with flexbox in 4.4.2 but no solutions are proposed.

When I run this code on 4.4.2, nothing shows up in the swiper-container. On other versions (and iOS), I get a picture and can then swipe through to see other pictures.

Any thoughts would be greatly appreciated!

• Jon

Here is my flexbox css:

.swiper-slide {
    margin: auto;
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

#swiperPic1 {
    background-image:url(../assets/screen-1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#swiperPic2 {
    background-image:url(../assets/screen-2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#swiperPic3 {
    background-image:url(../assets/screen-3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#swiperPic4 {
    background-image:url(../assets/screen-4.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}