使用flexbox将更多元素放入行中（iOS 6.1.3）

Question

我厌倦了使用CSS flexbox属性连续放置三个元素。当我在桌面Chrome上运行它时，它看起来很不错：

        <div>
            <div class="mainbox">
                <div class="subbox">
                    <img src="http://i1.squidoocdn.com/resize/squidoo_images/-1/lens12867651_1283718425kitten_scratching_a_tree.">
                </div>                        
                <div class="subbox">
                      <img src="http://www.revivalanimal.com/Shared/images/articles/ArticlePhotos/cat1.jpg">
                </div>
                <div class="subbox">
                    <img src="http://www.thinkcats.com/250-wide-images/tabby-cat-licking-its-lips.png">
                </div>
                <div class="subbox">
                    <img src="http://i1.squidoocdn.com/resize/squidoo_images/-1/lens12867651_1283718425kitten_scratching_a_tree.">
                </div>
                <div class="subbox">
                     <img src="http://www.revivalanimal.com/Shared/images/articles/ArticlePhotos/cat1.jpg">
                </div>
                <div class="subbox">
                    <img src="http://www.thinkcats.com/250-wide-images/tabby-cat-licking-its-lips.png">
                </div>
            </div>
        </div>

http://jsfiddle.net/jRH6d/4/

但我的iPad Chrome（以及Safari，Firefox）每行只渲染一个元素，而不是三个元素。我该如何解决？

更新： iOS 6.1.3存在问题， iOS 7.0.3没问题。