Responsive Design Module Problems with iPad 2 - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Responsive Design Module Problems with iPad 2

  • Responsive Design Module Problems with iPad 2
  • c6150587-4cb5-6f77-96ac-ff0000ae3c70_screenshot.gif
    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
  • 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.
     
  • 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">
  • 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
  • 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