[bug] iOS 10 safari card groups broken - v4.0.0-beta3

[Webotvorba]

Hello,

I got reports taht my page is broken on iOS 10. Now I got opportunity to test it and it really is. I am using there card layout but the cards are one on another and nothing is visible.

Any ideas/solutions?

mobile user agent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.0 Mobile/14F89 Safari/602.1

<div class="card-wrapper w-100">
    <div class="card-deck">
        <div class="card">
            <span class="badge badge-discount">Discount</span>                                <a href="en/8-building-volume/bedlam-p16" class="text-center">
            <img class="card-img-top" src="./uploads/files/thumbs/bedlam.jpg" alt="Bedlam">
        </a>
            <div class="card-body">
                <h4 class="card-title">
                    <a href="en/8-building-volume/bedlam-p16">Bedlam</a>
                    <span class="d-block">Underground Pharma</span>
                </h4>
                <p class="card-text">
                    Component Max LMG


                </p>
                <p class="card-text price">
                    <span class="old-price">98.99€</span>
                    <span class="new-price">74.99€</span>
                </p>
            </div>
            <div class="card-footer">
                <a href="en/8-building-volume/bedlam-p16" class="btn btn-primary btn-block">Detail</a>
            </div>
        </div>
        <!-- /.card-col-md-3 -->
        <div class="card">
            <span class="badge badge-new">New</span>                                <a href="en/8-building-volume/evoke-p74" class="text-center">
            <img class="card-img-top" src="./uploads/files/thumbs/evoke.jpg" alt="EVOKE">
        </a>
            <div class="card-body">
                <h4 class="card-title">
                    <a href="en/8-building-volume/evoke-p74">EVOKE</a>
                    <span class="d-block">Warrior Labs</span>
                </h4>
                <p class="card-text">
                    Increases TST production for maximum
                </p>
                <p class="card-text price">
                    <span class="old-price">84.99€</span>
                    <span class="new-price">74.99€</span>
                </p>
            </div>
            <div class="card-footer">
                <a href="en/8-building-volume/evoke-p74" class="btn btn-primary btn-block">Detail</a>
            </div>
        </div>
        <!-- /.card-col-md-3 -->
        <div class="card">
            <span class="badge badge-discount">Discount</span>                                <a href="en/8-building-volume/hydra-p20" class="text-center">
            <img class="card-img-top" src="./uploads/files/thumbs/hydra.jpg" alt="Hydra">
        </a>
            <div class="card-body">
                <h4 class="card-title">
                    <a href="en/8-building-volume/hydra-p20">Hydra</a>
                    <span class="d-block">Underground Pharma</span>
                </h4>
                <p class="card-text">
                    Suitable for beginners


                </p>
                <p class="card-text price">
                    <span class="old-price">70.99€</span>
                    <span class="new-price">58.99€</span>
                </p>
            </div>
            <div class="card-footer">
                <a href="en/8-building-volume/hydra-p20" class="btn btn-primary btn-block">Detail</a>
            </div>
        </div>
        <!-- /.card-col-md-3 -->
        <div class="card">
            <span class="badge badge-discount">Discount</span>                                <a href="en/8-building-volume/metha-quad-p7" class="text-center">
            <img class="card-img-top" src="./uploads/files/thumbs/metha%20quad.jpg" alt="METHA-QUAD">
        </a>
            <div class="card-body">
                <h4 class="card-title">
                    <a href="en/8-building-volume/metha-quad-p7">METHA-QUAD</a>
                    <span class="d-block">Blackstone Labs</span>
                </h4>
                <p class="card-text">
                    Improvement in muscle density and vascularity


                </p>
                <p class="card-text price">
                    <span class="old-price">119.99€</span>
                    <span class="new-price">88.99€</span>
                </p>
            </div>
            <div class="card-footer">
                <a href="en/8-building-volume/metha-quad-p7" class="btn btn-primary btn-block">Detail</a>
            </div>
        </div>
        <!-- /.card-col-md-3 -->
        <div class="w-100"></div>
    </div>
    <!-- /.card-deck -->
</div>

[mdo]

Please follow the issue template and provide a reduced test case in a live demo.

[Webotvorba]

Live demo at prohormones.eu

[wolfy1339]

They need a stripped down version not a live site

[Webotvorba]

Stripped down version: http://html.webotvorba.sk/ph/cards.html

I know since I changed the default code you probably will close it but I opened question at SO too but didnt get any solutions yet it would be nice if you guys could help me or point me to some solution.

[mdo]

Sorry, this looks like a flexbox bug, and not a Bootstrap bug. Perhaps it's flexbug no. 14? Alternatively you can also build it with our grid system and perhaps resolve it that way? I download the latest iOS 10 release for the Xcode Simulator and see no issues in that link for either example.

[Webotvorba]

I solved it we can close this