Alternative to "Display:-webkit-flex" for Chrome Mobile

css, flexbox

Solution

Solved it myself using the following markup.

HTML

    <div class="landingwrap">
        <div class="landingstrip">
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
        </div>
        <div class="landingstrip">
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
            <div class="landingicon-wrap">
                <a Class="landingicon landingicon-tl">
                    <span class="icon"></span>
                </a>
            </div>
       </div>
  </div>

CSS

body {
     background: #222;

}
.landingwrap {

    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
}
.landingstrip {
    height: 50%;
}
.landingicon-wrap {
    float: left;
    position: relative;
    width: 50%;
    height: 100%;
}
.landingicon {
    background-color: #2aace2;
    position: absolute;
        top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
}

Works a treat. JSFIDDLE

Problem

Lately I've been working on a mobile optimised web platform utilising HTML5/CSS3. This application has a landing page which consists of four equally sized tiles with an Icon in the middle (some other styles like a bit of padding in between them and border radius etc). These tiles are sized based on the screen size using "display: flex;" obviously due to the nature of the user being able to change the screen orientation. I'm achieving this using the following markup... HTML ``` <div class="container"> <a href="1.aspx"> <span class="icon1"></span> </a> <a href="2.aspx"> <span class="icon2"></span> </a> <a href="3.aspx"> <span class="icon3"></span> </a> <a href="4.aspx"> <span class="icon4"></span> </a> </div> ``` CSS ``` .container { min-height: 100%; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .container a { -webkit-flex: 1 1 48%; flex: 1 1 48%; margin: 1%; position: relative; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; } ``` I've run into a rather frustrating issue whereby this doesn't display properly at all on Chrome Mobile (works on Beta, not on current version) on either iOS or Android. Basically I'm looking to re-write the CSS to achieve exactly the same layout but I'm having difficulty finding another way to do it, any help is much appreciated.

Original source