Banner height not the device height only on iPad

Question

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

I've tested my site on desktop chrome, Android, Samsung tablet, iPhone 6, and iPad. My banner doesn't really work on iOS, mainly the iPad. The height becomes massive and doesn't match the height of the device.

I'm not sure where in the code it's incorrect, but on all devices I'd like the banner to be the height of the window, I hope I used that term right.

The code for my banner I grabbed from this article Responsive Height/Width Video Header

Here's the code I have:

#banner.container-fluid {
    padding: 0;
    position: relative;
}
#banner.overlay:after {
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    z-index:0;
    background-color: rgba(0,0,0,0.8);
}
header {
    position: relative;
    overflow: hidden;
    width:100vw;
    height:100vh;
    max-height:100vh;
    text-align:center;
}
.banner-text {
    position: relative;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    margin: 0 auto;
    max-width: 550px;
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
}
.banner-text h1,
.banner-text h4 {
    color: #fff;
}
.banner-text h1 {
    padding-bottom: 20px;
}
.banner-text h4 {
    padding-bottom: 40px;
}
.banner-text .logo-white {
    width: 75px;
    height: 65px;
    display: block;
    margin: 0 auto 20px auto;
}
.video-holder {
    position:absolute;
    height:100%;
    width:200%;
    left:-50%;
}
video {
    position:absolute;
    top: -99999px;
    bottom: -99999px;
    left: -99999px;
    right: -99999px;
    margin: auto;
    min-height:100%;
    min-width:50%;
}

score 0 · Answer 1 · answered Apr 25 '16 at 01:18

0

Apparently, is something the webkit team deliberately added. An issue had been created but it's since been closed as WONT FIX.

Solution (not ideal)

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  header { height: 62vh; }
}

In my testing, I didn't need to add styles for landscape, but I was testing on an iPad simulation. Results on an actual iPad may vary.

answered Apr 25 '16 at 01:18

Andy Hoffman

18,436
4
42
61

I'll have to try this out. Thanks. – Darren Bachan Apr 25 '16 at 20:04
@DarrenBachan I pulled down your site and have this working locally using the above code in the answer. Nothing changes on your end? – Andy Hoffman Apr 27 '16 at 03:51
What I see on the web's simulation of iPad using chrome's device mode it worked with the original code. The only thing I can figure out on my own is that it's the height:100vh on the header that's messing this up on iPad. Setting it to 62vh still makes it massive, just a bit less. EDIT: If I adjust it somewhere between 9-12vh it seems to look better or if I set it to 930px. It feels like such a buggy fix. – Darren Bachan Apr 27 '16 at 04:13
Still testing. Haven't given up. – Andy Hoffman Apr 27 '16 at 04:52
I was hoping that testing your site on my physical iPad Mini would reproduce the problem, but the UI looks fine there (no gigantic header). Sadly, I have no access to a larger iPad. I feel poorly about this one and thought I could arrive at a fix. Sorry, @DarrenBachan :( – Andy Hoffman Apr 27 '16 at 06:36

Banner height not the device height only on iPad

1 Answers1