asked on

Why doesn't this page scale on iPhone (iOS10.3.2)

It displays correctly on desktop, iPad and Android phone. Help! What am I missing here?

You can browse to this page at: http://pricelearman.com/beta/serena_b8/test-iPhone2.htm,
or copy the code below

<!DOCTYPE html>

<html lang="en">
      <head>

            <meta charset="utf-8">
             <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>iPhone Flex Test</title>
            <meta name="keywords" content="">
            <meta name="description" content="">
            <meta name="author" content="">

            <style>
                #page-wrapper {
                    position: relative;
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    background-color:#FFF;
                }

                .container-full-width {
                    margin:0;
                    padding:0;
                    width:100% !important;
                }

                .row-full-width {
                  padding:0;
                  margin:0;
                }

                .photogrid{
                  width:100%;
                  height:auto;
                  margin:0;
                  display:-webkit-flex;
                  display:flex;
                  -webkit-flex-direction:row;
                  -webkit-flex-wrap:wrap;
                  flex-flow:row wrap;
                  -webkit-justify-content:center;
                  justify-content:center;
                  -webkit-align-items:center;
                  align-items:center;
                }

                .photogrid > img:nth-child(1),
                .photogrid > img:nth-child(6){
                  flex: 1 1 50%;
                  margin:0;
                  padding:0;
                }

                .photogrid > img:nth-child(2),
                .photogrid > img:nth-child(3),
                .photogrid > img:nth-child(4),
                .photogrid > img:nth-child(5){
                  flex: 1 1 25%;
                  margin:0;
                  padding:0;
                }

                .img-responsive {
                  display: block;
                  max-width: 100%;
                  height: auto;
                }
            </style>


      </head>

      <body>
          <div id="page-wrapper">


            <div class="container-full-width">
                <div class="row-full-width">
                  <div class="photogrid">
                      <img src="./_img/artessa/neighborhood/photogrid/image01.jpg" alt="photo" class="img-responsive">
                      <img src="./_img/artessa/neighborhood/photogrid/image02.jpg" alt="photo" class="img-responsive">
                      <img src="./_img/artessa/neighborhood/photogrid/image03.jpg" alt="photo" class="img-responsive">
                      <img src="./_img/artessa/neighborhood/photogrid/image04.jpg" alt="photo" class="img-responsive">
                      <img src="./_img/artessa/neighborhood/photogrid/image05.jpg" alt="photo" class="img-responsive">
                      <img src="./_img/artessa/neighborhood/photogrid/image06.jpg" alt="photo" class="img-responsive">
                  </div>
                </div>
            </div>









            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="_js/vendor/jquery/2.1.4/jquery.min.js"><\/script>')</script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALGcS8tFxXL6eMp2O7rGbl6voJdXlaSLk&callback=callbackResponse"></script>
            <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>


             <!-- //-beg- concat_js -->
            <script src="./_js/plugins.js"></script>
            <script src="./_js/main.js"></script>
            <!-- //-end- concat_js -->

            <!-- module scripts -->
            <script src="./_js/modules/jquery.grozav.bootslider.min.js"></script>
            <script src="./_js/modules/jquery.grozav.plugins.min.js"></script>
            <!-- end module scripts -->

          </div>    <!-- /#page-wrapper -->

      </body>

</html>

Open in new window

Eoin OSullivan

If you test the page on Safari on iOS or OSX you'll see that when the screen width is small the images do not distort vertically
This appears to affect Safari on all devices desktop and ipad and iphone .. so its not an iPhone issue but Safari overall.
I've also tested Chrome on iOS and it is also exhibiting the same issue.

It looks like the support for flex isn't uniform between browsers and OS versions
In particular look at known bugs with Safari and flex - which are not resolved and only recently patched in Chrome
http://caniuse.com/#feat=flexbox
https://bugs.webkit.org/show_bug.cgi?id=137730

dlearman1

ASKER

Eoin,

Thanks for your comment. I did look at caniuse.com and it looked all green to me. Guess I should have looked a little deeper.
Do you know of any work-arounds for this bug.

SOLUTION

Eoin OSullivan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

lenamtl