+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Responsive Design Module Problems with iPad 2

Responsive Design Module Problems with iPad 2

5 posts, 0 answered
  1. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    03 Apr 2013
    Link to this post
    This one has me stumped.  I have worked with media queries quite a bit, but I cannot pin down what would be getting in the way.

    I created a rule, the only rule and enabled it.  It looks fine when testing on desktops and moving the viewport size around.  When viewing on an iPad I initially get a huge margin to the right of my screen with a black background.  Even stranger is that I am not using a black background anywhere in my body, html or page wrappers so where that is coming from is beyond me.  If I change my orientation of the iPad and then bring it back to the original orientation it will force the the layout to snap into place like I would expect it.

    I have a meta tag to force the viewport in my master page:
    <meta name="viewport" content="width=device-width">

    What bugs me is that I can turn the rule off and paste the exact code that is generated for the rule directly into my stylesheet and it will work fine.

    Here is the generated media query
    @media all and (min-width:600px) and (max-width:1024px) {
    /*
                                        33+34+33, 25+50+25
                                        Transformation in one column on the first row and two on the second
                                        */
     
                                        body { min-width: 0 !important; }
                                        .sfPublicWrapper { width: auto !important; }
     
                                        .sf_colsOut.sf_3cols_1_33,
                                        .sf_colsOut.sf_3cols_1_25 {
                                            width: 100% !important;
                                        }
                                        .sf_colsOut.sf_3cols_2_34,
                                        .sf_colsOut.sf_3cols_3_33,
                                        .sf_colsOut.sf_3cols_2_50,
                                        .sf_colsOut.sf_3cols_3_25 {
                                            width: 50% !important;
                                        }
                                        .sf_colsOut.sf_3cols_2_34 .sf_colsIn,
                                        .sf_colsOut.sf_3cols_2_50 .sf_colsIn
                                        {
                                            margin-left: 0 !important;
                                            margin-right: 0 !important;
                                        }/*
                                        25+25+25+25
                                        Transformation in four rows, one column
                                        */
     
                                        body { min-width: 0 !important; }
                                        .sfPublicWrapper { width: auto !important; }
     
                                        .sf_colsOut.sf_4cols_1_25,
                                        .sf_colsOut.sf_4cols_2_25,
                                        .sf_colsOut.sf_4cols_3_25,
                                        .sf_colsOut.sf_4cols_4_25 {
                                            width: 100% !important;
                                        }
                                        .sf_colsOut.sf_4cols_2_25 .sf_colsIn,
                                        .sf_colsOut.sf_4cols_3_25 .sf_colsIn,
                                        .sf_colsOut.sf_4cols_4_25 .sf_colsIn {
                                            margin-left: 0 !important;
                                            margin-right: 0 !important;
                                        }/*
                                        20+20+20+20+20
                                        Transformation in five rows, one column
                                        */
     
                                        body { min-width: 0 !important; }
                                        .sfPublicWrapper { width: auto !important; }
     
                                        .sf_colsOut.sf_5cols_1_20,
                                        .sf_colsOut.sf_5cols_2_20,
                                        .sf_colsOut.sf_5cols_3_20,
                                        .sf_colsOut.sf_5cols_4_20,
                                        .sf_colsOut.sf_5cols_5_20 {
                                            width: 100% !important;
                                        }
                                        .sf_colsOut.sf_5cols_2_20 .sf_colsIn,
                                        .sf_colsOut.sf_5cols_3_20 .sf_colsIn,
                                        .sf_colsOut.sf_5cols_4_20 .sf_colsIn,
                                        .sf_colsOut.sf_5cols_5_20 .sf_colsIn {
                                            margin-left: 0 !important;
                                            margin-right: 0 !important;
                                        }
    }

    What else gets loaded when a rule is enabled that would be getting in the way?  Load order of the layout_transformations file?

    attached is a wireframe mockup of the issue I see.

    edit:  I am using 5.4
  2. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    03 Apr 2013
    Link to this post
    I tried a few more things to narrow it down more.  I added a cssLoadOrder.xml file just in the event that I could force layout_transformations.css to load after my stylesheet, but that was a no go.  Then I got extreme and decided to delete my stylesheet and just let the transformation file do its thing.   I was able to replicate this behavior on my iPad.
     
  3. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    03 Apr 2013
    Link to this post
    I just realized that I was missing my initial scale declaration in the meta tag.  That seems to have taken care of this.  Any theories on why it didn't scream when I had the media queries inside the theme stylesheet, but blew up when loaded in a separate css file?

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    03 Apr 2013 in reply to Stacey
    Link to this post
    Hey Stacey,

    I'd say you've hit the style equivalent of jQuery troubles :)
    It's because of the loading time when the transform.css kicks in, it gets loaded probl after a .css or html element which causes a pre-render/paint event (not familiar with ipad2's rendering engine)

    The ipad's already starting to build the page in memory and uses it's default scale setting and then just applies the media-queries to it. (so it first sees say 1200px, applies 0.5 scale and then media queries kick in)

    Your css file (direct @rules) probably kick in earlier than the transforms.
    So it doesn't see the initial 1200px page-width.

    Jochem
  5. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    08 Apr 2013
    Link to this post
    Hi Stacey,

    I would agree with Jochem on this one. The problem must be coming from the fact, that your rules are applied before the transformations.  

    Regards,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
5 posts, 0 answered