Solved

Initial Paragraph height is wrong on iphone safari...help?

Posted on 2015-01-20
4
104 Views
Last Modified: 2015-01-20
Hi,

I am struggling with the resizing of my bg image and paragraphs.
But basically, I have a text paragraph #textonblack which is contained within a div #heregoesnothing

CSS :

.textonblack {
    color: #ffffff;
    overflow: scroll;
    height: 35%;
    margin: 10% 10% auto 10%;
    background-color: rgba(0,0,0,0.5);
    overflow-x: hidden;
    padding: 2%;
    border-color:white;
    border-width:3px;
}

#heregoesnothing {
    background-image: url("../img/abbybackground.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh; /*this resizes height to what the window is*/
    width:100vw;
    overflow-x: hidden; /* this hides the horizontal scrollbar*/
}

Open in new window



In order to deal with resizing on mobile, i have added the following jquery :

$(window).on('resize orientationChanged', function() {
    $('#heregoesnothing').css({"height":"100%","width":"100%"});
});

Open in new window


This all works fine, except on my iphone safari , where the initial paragraph size is all out of whack, and only upon reorientation will the size be correct. Can someone explain this to me?

You can see it here if you have an iphone safari browser:
http://www.encapturedperfection.com/d4rkstorm/Fashion.php
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40559570
Mobile browser support for using height:100vh and width:100vw is just not there yet (line 28, app.css). We are stuck with height:100% and width:100% for a while longer.

http://www.weareconvoy.com/2014/07/css-vw-and-vh-units-are-they-worth-using-yet/
0
 

Author Comment

by:NeverEndingFlashStories
ID: 40560167
THanks for the response Tom,

Changing the units from vh and vw to % did not work....

http://www.encapturedperfection.com/d4rkstorm/gallery.php

As you can see, when loaded on mobile safari, the paragraph box is still loading wrong initially. Actually, since i changed to %, it also now does not change to the correct size even after a change in orientation. When i was using vh, the paragraph would still change to the correct size after a change in orientation - through the jquery function above.

any ideas?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40560225
First we have to agree on the symptoms. When I view http://www.encapturedperfection.com/d4rkstorm/Fashion.php on mobile Safari, the paragraph looks fine. It's centered and there is an even margin around the edges. It looks the same on mobile Safari as it does on desktop Safari, Firefox and Chrome, except that it's smaller. On mobile Safari however the model in the background image is cut off on the right side. I don't need to change orientation to fix it, I just need a finger swipe on the screen. Then, when using my iOS Simulator, I see that when I change the units from vh, vw to %, that also fixes the issue.
BeforeAfter finger swipePerhaps you can post some pictures of the paragraph problem because I'm not seeing it.
0
 

Author Comment

by:NeverEndingFlashStories
ID: 40560350
Hi Tom,

I am so embarassed - your solution did work. Turns out, after updating the css as per your instruction, i was loading the wrong page on my iphone, which did not have the javascript called:

http://encapturedperfection.com/d4rkstorm/gallery.php

I found out when i was trying to take a bunch of screenshot and realized i was loading the wrong page entirely. My bad, thanks for your patience, and help!!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question