Responsive Design Module Problems with iPad 2
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">@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; 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,