Solved

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

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
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 look for a specific file type in a local or remote server directory using PHP.

839 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