0

I have a div .drawer (cart drawer) that has a z-index lower than the main wrapper #PageContainer of the website. So essentially is sits below. When a button is clicked the main wrapper moves to the left to reveal the div underneath.

Everything is fine except when viewing in Safari due to elastic scrolling if you scroll up past the top of the website you can see the div thats underneath. Every other browser seems to be fine so this issue is only due to the elastic scroll.

I need the div to be fixed and display:block; as I don't want it to disappear when the drawer closes. Any ideas how I can disable the elastic scroll for the site? Or if there is something I need to apply to my CSS?

Any help would be appreciated.

Here's my demo site

.drawer {
 position: fixed;
 display: block;
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 top: 0;
 bottom: 0;
 padding: 0 ($gutter / 2) ($gutter / 2);
 max-width: 95%;
 z-index: 10;
 }
user2498890
  • 1,528
  • 4
  • 25
  • 58
  • possible duplicate of [Disable elastic scrolling in Safari](http://stackoverflow.com/questions/8150191/disable-elastic-scrolling-in-safari) – technophobia Apr 29 '15 at 16:36
  • @technophobia the issue you linked to does discuss elastic scrolling in Safari, but is distinct from this. This issue is dealing with the accidental visibility of fixed position lower z-index items during scroll; the other issue is primarily concerned with allowing scrolling on a body whose overflow is set to hidden. – Mason Stewart Sep 29 '15 at 17:22

0 Answers0