webpage height is stretched in mobile safari

Question

I have created a website and it works fine on all platforms except mobile safari, where the page height is stretched and after the first click page become unresponsive.

html,body {
  height:100%;
  background:center no-repeat fixed url('../asset/images/logo1.jpg');
  background-size: cover;
  color:#444;
  font-family: 'Lato', sans-serif;
}

My meta tags:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

Edit: Website in question

Answer 1

The first problem is that the frameset is deprecated, and its no wonder that its causing issue on safari of iPhone. Please see - https://developer.mozilla.org/en/docs/Web/HTML/Element/frameset .

Second - why do you need to do 100% body and html height? Even if you want the height to be minimum 100%, then do min-height:100vh for the body.

Third - Even the frameset is not being used properly. You are including the contents of the website - http://satyam.esy.es/HealthFriends/ into the website - http://healthfriends.in/ . So why not copy paste the contents and assets as there are no extra frames in the frameset.

Last - If you cannot pull assets from the domain satyam.esy.es then there could be a problem, that you will have to develop assets by yourself. In that case too, make cdn requests for bootstrap, datepicker and moment.js. And write your own css and js.

About your issue of iPhone- Of course framesets are causing issue. But there could be something else too. You need to use Mordenizr to check what features work for safari iOS, and then use proper polyfills.

Hope this helps you debugging and developing. Thanks