html - Banner height not the device height only on iPad -


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

i've tested site on desktop chrome, android, samsung tablet, iphone 6, , ipad. banner doesn't work on ios, ipad. height becomes massive , doesn't match height of device.

i'm not sure in code it's incorrect, on devices i'd banner height of window, hope used term right.

the code banner grabbed article responsive height/width video header

here's code 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%; } 

apparently, webkit team deliberately added. issue had been created it's since been closed wont fix.

solution (not ideal)

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

in testing, didn't need add styles landscape, testing on ipad simulation. results on actual ipad may vary.


Comments

Popular posts from this blog

Load Balancing in Bluemix using custom domain and DNS SRV records -

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -