3

I'm in the process of developing a new website for a local club.

I've created the main webpage and have a fixed header, footer and side bar, the content is in a scrolling element. The page looks perfect on my MacBook and in various browsers. When I look at the page on my iPhone or iPad the page looks as it should until I zoom the page and then the fixed side bar is no longer fixed.

If anyone has any clues as to what I'm doing wrong I'd be very grateful as this is driving me mad.

The test page can be viewed at http://tawvelo.org/new/home.html.

I've attached a couple of photos which will hopefully show the issue.

Photo of how page should look

Photo of how page looks with iPhone / iPad zoom

user1680857
  • 61
  • 1
  • 2
  • 4
  • Possible duplicate of [CSS "position: fixed;" into iPad/iPhone?](http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-iphone) – Luca Oct 23 '15 at 11:33

1 Answers1

4

position: fixed is known not to play well on iOS - http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/

How to fix it? Easy. Search StackOverflow. This question has been asked previously:

  1. CSS “position: fixed;” into iPad/iPhone?
  2. Fixed positioning in Mobile Safari
Community
  • 1
  • 1
Terry
  • 63,248
  • 15
  • 96
  • 118
  • 3
    If the answer exists on SO, use the flag feature to mark it as a duplicate instead of linking to the other questions in an answer. – Drenmi Oct 23 '15 at 13:54
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Drenmi Oct 23 '15 at 13:54
  • @Drenmi And if the answer is posted **in excess of two years ago** and you think it's not up to scratch, edit it, or flag it for review. – Terry Oct 23 '15 at 13:55
  • 1
    The reason I commented on this is it popped up in the review queue ... You can also see that the second comment is auto-generated by a close-vote. ;-) – Drenmi Oct 23 '15 at 13:58
  • This doesn't really answer the question how you fix the problem with zooming – DaSch Aug 31 '16 at 07:52