Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

867 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now