Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2015-01-20
4
Medium Priority
?
122 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 2000 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

Independent Software Vendors: 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

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to count occurrences of each item in an array.
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…
Suggested Courses

636 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