Height doesn't properly work on IOS (iphone)

html ios css iphone responsive
19,459

Solution 1

I've Found my answer.

It was a JS script that automaticly finds the height of the window and sets that height to a given class.

But, that wasn't the whole solution. The height's where better, and weren't all over the place as it was before when I applied height:100%; to the html, body and section.

I made media queries, on the max-height per phone size, so it was expand beyond the intended sections.

https://90c726a539a841eb97f1b7b3f2aaf646.codepen.website

The JS solution is:

// On document ready set the div height to window
$(document).ready(function(){ 

    // Assign a variable for the application being used
    var nVer = navigator.appVersion;
    // Assign a variable for the device being used
    var nAgt = navigator.userAgent;
    var nameOffset,verOffset,ix;


    // First check to see if the platform is an iPhone or iPod
    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
        // In Safari, the true version is after "Safari" 
        if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
          // Set a variable to use later
          var mobileSafari = 'Safari';
        }
    }

  //===== FULL HEIGHT =====\\

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.full-height').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('.full-height').css({'height':(($(window).height()))+'px'});  
    };


});

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.full-height').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('.full-height').css({'height':(($(window).height()))+'px'});  
    };

 /* //===== HALF HEIGHT =====\\

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.half-height').css('min-height',(($(window).height() /2) + 60)+'px'/2);
    } else {
        // Else use the default window height
        $('.half-height').css({'min-height':(($(window).height()/2)  )+'px'});  
    };

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.half-height').css('min-height',(($(window).height()/ 2)  + 60)+'px');
    } else {
        // Else use the default window height
        $('.half-height').css({'min-height':(($(window).height()/ 2) )+'px'});  
    };
});

  //===== DOUBLE HEIGHT =====\\

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.half-height').css('min-height',(($(window).height()* 2)  + 60)+'px');
    } else {
        // Else use the default window height
        $('.half-height').css({'min-height':(($(window).height()* 2)  )+'px'}); 
    };


});

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('.half-height').css('min-height',(($(window).height()* 2)  + 60)+'px');
    } else {
        // Else use the default window height
        $('.half-height').css({'min-height':(($(window).height()* 2) )+'px'});  
    };*/
});

And the CSS (used SCSS) solution is:

//IPHONE&SAMSUNG PLUS
@media (max-height: 736px) {
  .full-height{
    max-height:736px;
  }
  .introductie-mobile {
  height: 1200px !important;
  max-height: 1200px;
  }
}
//IPHONE 6/7/8
@media (max-height: 667px) {
  .full-height{
    max-height:667px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }

}
//IPHONE %
@media (max-height: 568px) {
  .full-height{
    max-height:568px;
  }
  .introductie-mobile {
    height: 1200px !important;
    max-height: 1200px;
  }
}

Solution 2

It's not matter of IOS, it's matter of responsiveness. You have set fixed height to each section so it is overlapping with each others on mobile devices.

Just set all section height to height: 100vh.

And

@media (max-width: 430px){
    .introductie {
    height: 300vh;
    overflow: hidden;
}
}

It should works.

Solution 3

The height of the top black <div class="video-section"> is full height on any device including iPhone. So height in and of itself is not the problem.

On other devices however, the position of the next <div class="sign-up-banner"> changes dynamically so that it moves with a parallax effect as you scroll down. Once you're fully past the top black <div class="video-section"> the entire second <div class="sign-up-banner"> is fully visible. This is being done with the javascript code. For whatever reason, this javascript is not running on the iPhone.

Some of the CSS applied to the <form> within the <div id="coming-soon"> is still applied which leaves you with the div stuck behind the first one.

You can reverse this with the following css:

.sign-up-banner{
    position: static;
    height: auto;
}

#mc_embed_signup form{
    position: static !important;
    -ms-transform: none; /* IE 9 */
    -webkit-transform: none; /* Chrome, Safari, Opera */
    transform: none; 
}

You could wrap that in a media query so it only applies to a particular screen. To get it to apply for the iPhone. 

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    //insert your css here
}

That will apply css to a iPhone 4 and 4s. It's not guaranteed to not apply to other devices, but css cannot target particular devices so it's the best we've got. You can see media queries which target other devices including other iPhone models at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

Share:
19,459
Salman
Author by

Salman

Hi, My name is Salman, I'm a web-developer based in the Amsterdam, Netherlands. I'm 25 years old and have started learning web developing almost 3 years ago. My strengths are currently Jquery, JS, SCSS and Ruby on Rails.

Updated on July 20, 2022

Comments

  • Salman
    Salman almost 2 years

    I've created this website on codepen. While trying to make it responsive for all platforms I ran into a problem. It appears a single div covers the whole page (only on IOS) and not all heights are working properly (meaning nothing fits).

    I've been at it for days and still have no clue, why all the heights and rules don't apply on IOS.

    I've tried removing the video-section which reveals most of the page except the eind section which is just a blank white.

    I've tried adding max-height which does reveal some of the other content, but it also seems as if the page can't get any taller on IOS so I'm still limited to a space to work with. Also it doesn't seem a proper solution.

    I've tried changing the position but with no avail.

    It just seems as if the heights don't properly work on IOS

    Can anyone help me figure out why this is happening? 

    var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    } else {
      $element.removeClass('in-view');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

var controller = new ScrollMagic();

	var ctrl = new ScrollMagic.Controller({
	    globalSceneOptions: {
	        triggerHook: 'onLeave'
	    }
	});

//Enter section-1
new ScrollMagic.Scene({
  triggerElement: "#coming-soon",
  duration: "100%"
})
  .setTween(TweenMax.to("#image-1", 1, { top: "0%" }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#coming-soon",
  duration: "100%"
})
  .setTween(TweenMax.to(".sign-up-banner", 1, { top: "0%" }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#coming-soon",
  duration: "100%"
})
  .setTween(TweenMax.to("#text-1", 1, { top: "0%" }))
  .addTo(ctrl);

//Leave section-1

new ScrollMagic.Scene({
  triggerElement: "#introductie-1",
  duration: "100%"
})
  .setTween(TweenMax.to("#image-1", 1, { top: "40%", opacity:-1 }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#introductie-1",
  duration: "100%"
})
  .setTween(TweenMax.to("#text-1", 1, { top: "-50%", opacity:0 }))
  .addTo(ctrl);

//leave seaction-2

new ScrollMagic.Scene({
  triggerElement: "#introductie-2",
  duration: "100%"
})
  .setTween(TweenMax.to("#image-2", 1, { top: "-40%", opacity:0 }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#introductie-2",
  duration: "100%"
})
  .setTween(TweenMax.to("#text-2", 1, { top: "-50%", opacity:0 }))
  .addTo(ctrl);

new ScrollMagic.Scene({
  triggerElement: "#introductie-2",
  duration: "100%"
})
  .setTween(TweenMax.to("#release", 1, {opacity:1 }))
  .addTo(ctrl);
    @import url("https://fonts.googleapis.com/css?family=Raleway:200");
* {
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 100 !important;
}

input {
  -webkit-appearance: none;
}

html,
body,
section {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  color: #666;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0px;
}

ul {
  list-style-type: none;
}

ul li {
  display: inline-block;
  margin: 50px 25px;
}

ul li .fa {
  font-size: 5em;
  transition: all 1s ease;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

a {
  color: #666;
}

.desktop-only {
  display: initial;
}

.align-center {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.mobile-only {
  display: none;
}

.icon {
  background-color: antiquewhite;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 20px auto;
}

.fa-icon {
  font-size: 5em !important;
  padding: 40px;
}

.nederland-icon {
  width: 40%;
  padding: 40px;
}

#mc_embed_signup form {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -50%);
  /* Chrome, Safari, Opera */
  padding-left: 0px !important;
}

.sign-up-banner {
  z-index: 2;
  position: relative;
  top: -50%;
  color: white;
  height: 50%;
  background-color: #f3c17e;
}

.sign-up-banner input::placeholder {
  color: white;
}

.sign-up-banner #mc_embed_signup .mc-field-group input {
  border-bottom: 2px solid #ffffff !important;
}

.sign-up-banner #mc_embed_signup {
  background: #fff0;
}

.sign-up-banner #mc_embed_signup .mc-field-group input {
  background-color: #ffffff00;
  color: white;
}

.sign-up-banner #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
  background-color: rgba(255, 255, 255, 0);
}

.video-section {
  z-index: 3;
  overflow: hidden;
  position: relative;
  top: 0px;
  background-color: black;
  max-height: 100%;
  max-height: 100vh;
}

.video-section video {
  width: 100%;
}

#coming-soon {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  color: white !important;
  z-index: 3;
  max-height: 100%;
  max-height: 100vh;
}

.coming-soon h1 {
  font-size: 52px;
}

.introductie {
  position: relative;
  z-index: 1;
}

#introductie-1 {
  height: 100%;
}

#introductie-1 #image-1 {
  overflow: hidden;
  width: 25%;
  margin: 90px auto;
  max-height: 70%;
}

#introductie-1 .text-container {
  width: 500px;
  margin: 180px auto;
  color: #666;
}

#introductie-1 .text-container h1 {
  font-size: 2em;
  margin-bottom: 40px;
}

#introductie-1 .text-container p {
  font-size: 1.4em;
}

#introductie-2 {
  height: 100%;
}

#introductie-2 h1 {
  font-size: 2em;
  margin-bottom: 40px;
}

#introductie-2 p {
  font-size: 1.4em;
}

#introductie-2 .text-container {
  width: 60%;
  text-align: center;
  margin: 0 auto;
}

#introductie-2 #text-2 {
  position: relative;
}

#introductie-2 #image-2 {
  overflow: hidden;
  width: 60%;
  margin: 90px auto;
  position: relative;
}

#introductie-2 #image-2 img {
  width: 100%;
}

.left,
.right {
  width: 50%;
}

.left {
  float: left;
}

.right {
  float: right;
}

#image-1 {
  position: absolute;
  top: -70%;
  left: 10%;
}

#text-1 {
  top: 40%;
  right: 10%;
  position: absolute;
}

.center-container {
  display: table-cell;
  vertical-align: middle;
}

.center {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.center-text {
  text-align: center;
  overflow: hidden;
}

#eind {
  position: relative;
}

#release {
  opacity: 0;
}

#disclaimer {
  position: relative;
  left: 48%;
  bottom: 10px;
}

.fa-facebook:hover {
  color: #3b5998;
}

.fa-instagram:hover {
  color: #fbad50;
}

#eind ul {
  padding: 0px;
}

#eind p {
  margin-bottom: 100px;
}

.button {
  background-color: #faebd7 !important;
  color: #666 !important;
}

#mc_embed_signup {
  width: 40%;
  margin: 0 auto;
}

#mc_embed_signup .mc-field-group input {
  border: 0px !important;
  border-radius: 0px !important;
  border-bottom: 2px solid #666666 !important;
}

#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
  border: 0px !important;
  border-radius: 0px !important;
  border-bottom: 2px solid #e85c41 !important;
}

#mc_embed_signup_scroll {
  text-align: center;
}

textarea:focus,
input:focus {
  outline: none;
}

#mc_embed_signup h2 {
  margin-bottom: 10% !important;
}

.clear {
  width: 150px;
  margin: 0 auto;
  margin-top: 5%;
}

.clear #mc-embedded-subscribe {
  border-radius: 0px !important;
  width: 150px !important;
  margin: 0 auto !important;
  height: 50px !important;
}

/*animation element*/

.animation-element {
  position: relative;
}

/*bounce up animation for the subject*/

.bounce-up {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bounce-up.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

@media (max-width: 1440px) {
  #disclaimer {
    position: relative;
    left: 48%;
    bottom: 10px;
  }
}

@media (max-width: 1024px) {
  #image-1 img {
    position: relative;
    left: -244px;
  }
}

@media (max-width: 768px) {
  .video {
    margin-top: 30%;
  }
  #introductie-1 .text-container {
    width: 280px;
  }
  #image-1-container #image-1 {
    width: 35%;
  }
  #mc_embed_signup {
    width: 60%;
  }
}

@media (max-width: 430px) {
  .sign-up-banner {
    position: sticky;
    top: 0px !important;
    max-height: 325px;
  }
  .desktop-only {
    display: none;
  }
  #disclaimer {
    left: 42%;
  }
  .mobile-only {
    display: inherit;
  }
  .coming-soon h1 {
    font-size: 45px;
  }
  .sign-up-banner {
    height: 60%;
  }
  #introductie-1 {
    height: 250%;
  }
  #introductie-2 {
    max-height: 500px;
    height: 200%;
  }
  #release {
    opacity: 1;
  }
  .left,
  .right {
    width: 100%;
  }
  #introduction-1-container {
    height: 100%;
  }
  #introductie-1 #image-1 {
    display: none;
  }
  #introductie-2 #image-2 {
    display: none;
  }
  #introductie-2 .text-container {
    width: 80%;
    text-align: center;
    margin: 0 auto;
  }
  #introductie-1 .text-container {
    position: initial;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
  }
  #coming-soon h1 {
    font-size: 24px;
  }
  #introductie-1 .text-container p {
    font-size: 1.2em;
  }
  #introductie-2 p {
    font-size: 1.2em;
  }
  .video {
    margin-top: 60%;
  }
  .social-media ul {
    padding: 0px;
  }
  #mc_embed_signup {
    width: 100%;
    margin: 0 auto;
  }
  #text-1 {
    opacity: 1 !important;
  }
  #text-2 {
    position: initial !important;
    opacity: 1 !important;
  }
  #eind {
    height: 120%;
    max-height: 1000px;
  }
  .eind-block {
    position: relative;
  }
  .fa-balance-scale {
    padding: 40px 34px;
  }
}

@media (max-width: 320px) {
  #coming-soon h1 {
    font-size: 24px;
  }
  #introductie-1 .text-container p {
    font-size: 1.2em;
  }
  #introductie-2 p {
    font-size: 1.2em;
  }
  .video {
    margin-top: 60%;
  }
  .social-media ul {
    padding: 0px;
  }
  #mc_embed_signup {
    width: 100%;
    margin: 0 auto;
  }
}
    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
  
  <title>Volks</title>
  <link rel="stylesheet" href="styles/index.processed.css">
  <script src="https://use.fontawesome.com/39f17a3ca2.js"></script>

</head>
<body>
  <section class="video-section">
   <div class="video">
    <video loop autoplay id="video-background" muted playsinline>
      <source src="http://rapio.nl/videos/teaser.mp4" type="video/mp4">
    </video>
   </div>
  </section> 

  <section id="coming-soon">
      <div class="align-center center-text coming-soon">
        <h1 class="">Binnenkort verkrijgbaar.</h1>
      </div>
  </section>
  <section class="sign-up-banner">


        <!-- Begin MailChimp Signup Form -->
        <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
        <style type="text/css">
          #mc_embed_signup {
            background: #fff;
            clear: left;
            font: 14px Helvetica, Arial, sans-serif;
          }
          /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
          	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
        </style>
        <div id="mc_embed_signup">
          <form action="https://volksphone.us17.list-manage.com/subscribe/post?u=e0b25e148103e039f3ed554d1&amp;id=bbad48d887" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div id="mc_embed_signup_scroll">
              <h2>Ontvang een notificatie bij de bekendmaking van onze crowdfundings-campagne.</h2>
              <div class="mc-field-group">
                <input type="email" placeholder="Emailadres" name="EMAIL" class="required email" id="mce-EMAIL">
              </div>
              <div class="response" id="mce-error-response" style="display:none"></div>
              <div class="response" id="mce-success-response" style="display:none"></div>
            </div>
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e0b25e148103e039f3ed554d1_bbad48d887" tabindex="-1" value=""></div>
            <div class="clear"><input type="submit" value="verzend" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </form>
      </div>
      <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
      <script type='text/javascript'>
        (function($) {
          window.fnames = new Array();
          window.ftypes = new Array();
          fnames[0] = "EMAIL";
          ftypes[0] = "email";
          fnames[1] = "FNAME";
          ftypes[1] = "text";
          fnames[2] = "LNAME";
          ftypes[2] = "text";
          fnames[3] = "BIRTHDAY";
          ftypes[3] = "birthday";
        })(jQuery);
        var $mcj = jQuery.noConflict(true);
      </script>
      <!--End mc_embed_signup-->
    

  </section>
  <section class="introductie" id="introductie-1">
    <div class="container" id="introduction-1-container">
      <div class="left" id="image-1-container">
        <div class="image-container " id="image-1">
          <img src="media/image-1.jpg">
        </div>
      </div>
      <div class="right">
        <div class="text-container" id="text-1">
          <div class="icon  mobile-only"><img class="nederland-icon" src="media/nederland_icoon.png"></div>
          <h1>Van Nederlandse Bodem</h1>
          <p>Volks is een Amsterdamse startup achter de eerste Nederlandse high-end smartphone. Maak kennis met onze technologie, je zult verrast zijn.</p><br><br>
          <div class="icon  mobile-only"><i class="fa fa-balance-scale mobile-only fa-icon" aria-hidden="true"></i></div>
                <h1>Balans tussen prijs en kwaliteit</h1>
          <p class="mobile-only">Wanneer had je voor het laatst een smartphone in je handen? Precies, nu.</p><p>Wanneer had je voor het laatst een smartphone in je handen? Precies, nu.</p><p>Er is een overvloed aan smartphones. Helaas betaal je nog steeds de hoogste prijs, of iets minder maar ontbreekt goede ondersteuning en kwaliteit. Volks wilt een balans bieden tussen een eerlijke prijs, goede customer support en topkwaliteit.  
</p><br><br>
      <div class="icon mobile-only"><i class="fa fa-users fa-icon" aria-hidden="true"></i></div>
      <h1 class=" mobile-only">En nu voor iedereen</h1>
      <p class=" mobile-only">Het is bijna zover. Binnenkort start de crowdfunding-campagne en hier hebben we jouw hulp hard bij nodig. Tijdens deze campagne kom je in de gelegenheid een pre-order te plaatsen. Slechts een gelimiteerd aantal Volks toestellen zijn beschikbaar tijdens de voorverkoop. 
</p>
        </div>
      </div>
    </div>
  </section>
  <section class="introdcutie desktop-only" id="introductie-2">
    <div class="text-container" id="text-2">
      <div class="icon mobile-only"><i class="fa fa-users fa-icon" aria-hidden="true"></i></div>
      <h1>En nu voor iedereen</h1>
      <p>Het is bijna zover. Binnenkort start de crowdfunding-campagne en hier hebben we jouw hulp hard bij nodig. Tijdens deze campagne kom je in de gelegenheid een pre-order te plaatsen. Slechts een gelimiteerd aantal Volks toestellen zijn beschikbaar tijdens de voorverkoop. 
</p>
    </div>
    <div class="image-container " id="image-2">
      <img src="media/image-2.png">
    </div>

    
  </section>
  <section id="eind">
      <div class="align-center center-text coming-soon eind-block">
        <p>Meer info over de datum en technische specificaties volgt binnenkort op onze Facebookpagina.</p>
        <h1 class="">Volks<i class="fa fa-copyright" aria-hidden="true" style="font-size:15px;"></i> <br> December 2017</h1>
        <div class="social-media">
          <ul>
            <li>
              <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
            </li>
            <li>
              <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
            </li>
          </ul>
        </div>
    </div>
  </section>
  <a id="disclaimer" href="disclaimer.html">disclaimer</a>
  <!-- ==== scripts ==== -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
  <!-- ==== CUSTOM JS ==== -->
  <script src="scripts/index.js"></script>
</body>
</html>
  • Salman
    Salman over 6 years
    Thanks James for your response, The css-tricks link was really helpful. I've tried your suggested, but unfortunately it didn't work. I'm pretty confident that IOS is having problems with the height, because one section covers the whole page (tested on Iphone 7) Could differ on a different Iphone.
  • James Jones
    James Jones over 6 years
    @Notorious_Creed Glad I could be of at least some help. I set that CSS in the browser while looking at your codepen in this iPhone simulator and it fixed the problem. I can't be sure it would work with other iPhones. You should make sure when you add the CSS it actually overwrites the previous CSS before you give up on it. Perhaps you could apply !important to everything as a test. I'm not sure what you mean by "problems with the height, because one section covers the whole page" because the black phone video covers the whole screen on any device.
  • Berdesdan
    Berdesdan over 6 years
    did you check to see what happens when you change the height of the sections to 100vh on an ios device? All other sections disappear. try setting the first 2 sections to 50vh and see what happens.
  • Zahidul Islam Ruhel
    Zahidul Islam Ruhel over 6 years
    Now i test it personally, it works for me with given updated code, Please try and let me know if it's not work for you.
  • psvj
    psvj over 3 years
    this wont work on iOs safari, it does not honor 100vh.

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

Background-Attachment: Fixed Doesn't Work On iOS
overflow-x:hidden not working on iPhone
Website is displaying a white space on right side of screen in iPhone
Overflow-x value ignored in mobile safari
CSS safe area attributes doesn't work on iPhone X
Meta viewport tag seems to be ignored completely or has no effect
Prevent iPhone from zooming form?
font-family not being applied on mobile devices
How to make iFrame responsive in iPhone 6?
Unable to remove the page outer margin of the pdf which is created using html/css in flutter iOS