Solved

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

Posted on 2015-01-20
4
95 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
  • 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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to make similar contact form? 8 68
css help 3 124
How can I write .htaccess code to redirect 301 pages? 1 122
How to write an English digest paper 6 50
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

810 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