mobile safari z index

Development
Custom Solutions
Back-End Solutions
Ecomify Theme🔥
Ecomify Mentor
Ecomify Program
Documentation
Designed With Ecomify
Testimonials 2.0
Marquee 2.0
Wishlist 2.0
Instagram Gallery 2.0
Trust Badges
Parallax Media With Countdown

Shoppable Video Slider

Custom Reviews Grid
Promo Announcement
Recommended Product Block
Waves For Any Theme
Accordion Footer

Wishlist 2.0 On all Themes

Megamenu for Dawn 2.0
Age Verification Check
Sales Popup
Hamburger Menu
Recommended Product Block for Dawn
Infinite Pagination
Custom HTML & LIquid
Terms & Conditions Checkbox
DAWN 10- Product Tabs
Promo Announcement Copy & Paste

View All Snippets

My cart ( 0 ).

Your cart is currently empty

Search our store

Ecomify Premium Shopify Theme v3.3.1

Regular price $349.00 Sale price $249.00

Marquee Text 2.0

Instagram Gallery For All Themes

How To Create A Parallax Media With Countdown In Your Shopify Store Tutorial

Parallax Media With Countdown & Video

Promo Grid Feature

Scrolling Text Feature

Shopify Testimonials For All Themes

Fixing z-index issue on Safari browser

Ecom Graduates @ Mar 15, 2022

If you're a web developer, you're probably well aware of the numerous challenges that come with cross-browser compatibility. One of the most common issues that web developers face is the z-index problem on the Safari browser. This issue arises when the stacking order of elements on a webpage is not rendered properly on Safari.

In this article, we'll take a look at what z-index is and how it works, why z-index issues occur on Safari, and finally, how to fix the problem.

Introduction
What is z-index and how does it work?
Why do z-index issues occur on Safari?

Method 1: Change the stacking context

Method 2: use transform property, method 3: set opacity to 0.99, method 4: use a pseudo-element, 1. introduction.

As mentioned earlier, the z-index issue is a common problem that web developers face while building a website. It can occur on any browser, but it is particularly prevalent on Safari. The issue arises when two or more elements have the same z-index value, and Safari does not render them in the correct order.

2. What is z-index and how does it work?

In CSS, z-index is a property that controls the stacking order of elements on a webpage. It determines which element appears on top of the other. The higher the z-index value, the more priority an element has in terms of being visible on top of other elements.

3. Why do z-index issues occur on Safari?

Z-index issues can occur on Safari due to its unique rendering engine. Safari renders elements using a different algorithm than other browsers. This can lead to the incorrect stacking order of elements, particularly when two or more elements have the same z-index value.

4. How to fix z-index issues on Safari

There are several ways to fix the z-index problem on Safari. Here are a few methods that you can use:

One of the simplest ways to fix the z-index issue on Safari is to change the stacking context of the elements. You can do this by setting a z-index value to the parent element of the elements that are causing the problem. By doing this, you can create a new stacking context and prevent the elements from overlapping each other.

Another way to fix the z-index issue on Safari is to use the transform property. You can apply a small transform to the element that is not being rendered correctly. This will create a new stacking context and prevent the element from overlapping with other elements.

Setting the opacity of the element to 0.99 can also fix the z-index issue on Safari. This is because Safari treats an element with opacity less than 1 as a new stacking context. By setting the opacity of the element to 0.99, you can prevent it from overlapping with other elements.

You can also use a pseudo-element to fix the z-index problem on Safari. You can create a new pseudo-element and apply a higher z-index value to it. This will push the element above the other elements and prevent it from overlapping with them.

5. Conclusion

In conclusion, the z-index issue on Safari can be a frustrating problem for web developers. However, by understanding what z-index is, why the issue occurs on Safari, and how to fix it, you can easily solve the problem. By following the methods

Share this article

Together, lets do something legendary, ecomgraduates® on facebook.

Skip to main content
Select language
Skip to search

Formal syntax

The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

For a positioned box (that is, one with any position other than static ), the z-index property specifies:

The stack level of the box in the current stacking context .
Whether the box establishes a local stacking context.

The example above shows the effect of z-index . On the left we've drawn three boxes and made them overlap using absolute positioning . By default, the elements are stacked following the order they're declared in the HTML. On the right we have the same markup, but have reversed the default order using z-index .

The z-index property is specified as either the keyword auto or an "><integer> .

Specifications

Browser compatibility.

CSS position property
Understanding CSS z-indexes

Document Tags and Contributors

CSS Property
NeedsMobileBrowserCompatibility
CSS Reference
CSS Positioning
Understanding CSS z-index

4 reasons your z-index isn’t working (and how to fix it)

Z-index is a CSS property that allows you to position elements in layers on top of one another. It’s super useful, and honestly a very important tool to know how to use in CSS.

Unfortunately, z-index is one of those properties that doesn’t always behave in an intuitive way. It seems simple at first- a higher z-index number means the element will be on top of elements with lower z-index numbers. But there are some additional rules that make things more complicated. And you can’t always fix things by setting the z-index to 999999! ?

This article will explain in detail four of the most common reasons that z-index isn’t working for you, and exactly how you can fix it.

We’ll be going through some actual code examples and problem-solving them. After reading this article, you’ll be able to understand and avoid those common z-index pitfalls!

Let’s check out the first reason:

1. Elements in the same stacking context will display in order of appearance, with latter elements on top of former elements.

In our first example, we have a relatively simple layout that includes 3 main elements:

An image of a cat
A white block with text
Another image of the same cat

Here’s the HTML markup for that:

In this layout, we ideally want the white block of text to be on top of both cats.

To try to achieve this, we’ve added some negative margins to the CSS for both cat images, so that they overlap the white block a bit:

However, it looks like this:

The first cat is indeed positioned underneath the white content block, just like we want. But the second cat image is positioned on top of the block!

Why is this happening?

The reason for this behavior is due to the natural stacking order on the webpage. These guidelines basically determine which elements will be on top and which will be on the bottom.

Even if elements don’t have their z-index set, there is a rhyme and reason to which ones will be on top.

In our case, none of the elements have a z-index value. So their stacking order is determined by their order of appearance. According to this rule, elements that come later in the markup will be on top of elements that come before them.

(You can read more of the stacking order guidelines at Mozilla Developer Network here .)

In our example with the cats and the white block, they are obeying this rule. That’s why the first cat is underneath the white block element, and the white block is underneath the second cat.

Ok, stacking order is all well and good, but how do we fix the CSS so the second cat is underneath the white block?

Let’s look at the second reason:

2. The element doesn’t have its position set

One of the other guidelines that determine stacking order is if an element has its position set or not.

To set position for an element, add the CSS position property to anything other than static , like relative or absolute . (You can read more about it in this article that I wrote.)

According to this rule, positioned elements will display on top of unpositioned elements.

So setting the white block to be position: relative , and leaving the two cat elements unpositioned will put the white block on the top of the cats in the stacking order.

This is how it will look- you can also play around with the Codepen above.

Now, the next thing we want to do is rotate the bottom cat upside down, using the transform property. That way, both cats will be underneath the white block, with only their heads sticking out.

But doing so can cause more z-index -related confusion. We'll address the problem and the solution in the next part.

3. Setting some CSS properties like opacity or transform will put the element in a new stacking context.

As we just mentioned, we want to turn the bottom cat upside down. To accomplish this, we’ll add transform: rotate(180deg) .

But this causes the bottom cat to be displayed on top of the white block again!

What the heck is going on here??

You may not run into this issue often, but another aspect of stacking order is that some CSS properties like transform or opacity will put the element into its own, new stacking context .

What this means is that adding the transform to the .cat-bottom element makes it behave as if it had a z-index of 0. Even though it doesn't have its position or z-index set at all! (W3.org has some informative but rather dense documentation on how this works with the opacity property)

Remember, we never added a z-index value to the white block, only position: relative . This was enough to position the white block on top of the unpositioned cats.

But since the .bottom-cat element is acting as though it is relatively positioned with z-index: 0 , transforming it has positioned it on top of the white block.

The solution to this is to set position: relative and explicitly set z-index on at least the white block. You could go one step further and set position: relative and a lower z-index on the cat elements, just to be extra safe.

In my opinion, doing this will solve most, if not all of the more basic z-index issues.

Now, let’s move on to our last reason that your z-index isn't working. This one is a bit more complex, because it involves parent and child elements.

4. The element is in a lower stacking context due to its parent’s z-index level

Let’s check out our code example for this:

Here’s what we have: a simple webpage with regular content, and a pink side tab that says “Send Feedback” that is positioned on top of the content.

Then, when you click on the photo of the cat, a modal window with a transparent gray background overlay opens up.

However, even when the modal window is open, the side tab is still on top of the gray overlay. We want the overlay to be displayed over everything, including the side tab.

Let’s take a look at the CSS for the elements in question:

All the elements have their position set, and the side tab has a z-index of 5, which positions it on top of the content element, which is at z-index: 1 .

Then, the modal has z-index: 100 which should put it on top of the side tab at z-index: 5 . But instead, the modal overlay is underneath the side tab.

Previously, we addressed some factors that go into the stacking context, such as if the element has its position set, as well as its order in the markup.

But yet another aspect of stacking context is that a child element is limited to the stacking context of its parent.

Let’s take a closer look at the three elements in question.

Here’s the markup we have:

Looking at the markup, we can see that the content and side tab elements are siblings. That is, they exist at the same level in the markup (this is different from z-index level). And the modal is a child element of the content element.

Because the modal is inside the content element, its z-index of 100 only has an effect inside its parent, the content element. For example, if there were other child elements that were siblings to the modal, their z-index values would put them on top of or underneath each other.

But the z-index value of those child elements doesn't mean anything outside the parent, because the parent content element has its z-index set to 1.

So its children, including the modal, can’t break out of that z-index level.

(You can remember it with this slightly depressing metaphor: a child can be limited by its parents, and can’t break free of them.)

There are a couple of solutions to this problem:

Solution: Move the modal outside of the content parent, and into the main stacking context of the page.

The corrected markup would then look like this:

Now, the modal element is a sibling element to the two others. This puts all three elements in the same stacking context as them, so each of their z-index levels will now affect one another.

In this new stacking context, the elements will display in the following order, from top to bottom:

modal ( z-index: 100 )
side tab ( z-index: 5 )
content ( z-index: 1 )

Alternative Solution: Remove positioning from the content, so it won’t limit the modal’s z-index.

If you don’t want to or can’t change the markup, you can fix this problem by removing the position setting from the content element:

Since the content element is now unpositioned, it will no longer limit the modal’s z-index value. So the open modal will be positioned on top of the side tab element, due to its higher z-index of 100.

While this does work, I personally would go for the first solution.

Because if for some reason in the future you have to position the content element, it will again limit the modal’s order in the stacking context.

I hope that you’ve found this tutorial helpful! To sum up, most issues with z-index can be solved by following these two guidelines:

Check that the elements have their position set and z-index numbers in the correct order.
Make sure that you don’t have parent elements limiting the z-index level of their children.

I'm creating a course in responsive design! Sign up here to get emailed when it's published.

I write web development tutorials on my blog c oder-coder.com , post mini-tips on Instagram and coding tutorials on YouTube .

I write tips for beginner web developers at Coder-Coder.com. You can also find me on Twitter and Instagram @thecodercoder

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Fix Mobile Safari fixed position and z-index issue

This quick code fixes position:fixed and z-index issue on mobile safari.

The scenario:

Assume you have a header on top of a page, it's set to be fixed position, and you have its z-index set to lowest. Then you have a content layer, so when you scroll down, the header will remain fixed and thus you have a good effect.

However, with mobile safari the header z-index seems to be ignored, otherwise quite buggy. Here is the fix, add this to the content layer and it will magically fix itself.

I had this issue and I did a quick search on google. Here is the reference: fixed-positioning-z-index-issue-in-mobile-safari

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Exclusive web development news, freebies, tutorials and mobile news delivered right to your inbox. See our newsletter sample .

Javascript Library

Animation & Effect
Carousel, Gallery & Slider
Chart & Graph
Date & Time
File Upload
Framework & Libraries
Menu & Navigation
Mobile Development
Popup & Modal Window
Rich Text Editor
Social Networking
Table & Data
Tools & Utilities

Z-index stacking contexts, experimental CSS and iOS Safari

Ordinarily, there’s little use for the CSS z-index property. If you are unsure exactly what it is, the W3C spec describes it thus:

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a “z-axis” and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis.

For the most part, there isn’t much use for the property as things take care of themselves:

Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

This basically means that elements later in the HTML render automatically higher than those below. The crucial thing to remember with z-index is that it ONLY works on elements that have their ‘position’ value set to something other than ‘static’ (which is the default). So your element needs to be position: absolute; , position: relative; or position: fixed; for z-index to take affect.

Z-index and stacking contexts

It’s not something you are likely to come across everyday but if you are using experimental CSS properties in your design (for example CSS 3D transforms), I think it’s worth re-visiting how z-index stacking ‘contexts’ can trip you up.

If you are designing something with Drop-downs, modals and collapsing sections and can’t understand why elements appear in the order they do. It’s perhaps because of the ‘stacking contexts’ phenomenon.

I hit this exact problem when I had a DOM element near the root of the HTML node that I couldn’t get to appear behind something much further down the DOM tree. Here’s a demonstration:

See the Pen FiKvs by Ben Frain ( @benfrain ) on CodePen

When I first hit this, a quick search turned up Philip Walton’s post on the topic .

To crudely summarise Philips post (apologies for the bastadisation: you should go read it, like now) certain CSS properties can establish a new stacking context for elements. There is deeper (but very good) explanations of the stacking context phenomonen at MDN.

Understanding what stacking contexts were certainly set me off in the right direction to solve my issues. I won’t re-iterate Philips post except to say that what is important from my POV is the following description in the W3C spec:

In future levels of CSS, other properties may introduce stacking contexts …

The spec goes on to give the example of opacity (which is what Philip uses as an example in his post) however, in my case, the offending item was a CSS transform.

Interestingly, it doesn’t need to be on the element in question either (e.g. the one you can’t get to appear where you want). For example, a transform on the root element will, due to the nature of z-index stacking contexts, affect the z-index of items within it.

Curve balls

There are curve balls. Safari in iOS 7 and iOS 6 create stacking contexts differently if you are using -webkit-overflow-scrolling on an element. Take a look at the following and compare on iOS 6 and iOS 7 if you can:

See the Pen FAJmh by Ben Frain ( @benfrain ) on CodePen

To summarise what you would see: in iOS 7 and latest desktop Chrome and Safari, clicking the button adds a 3D Transform to the root of the pink element. As the aqua coloured element is a node off that it is sent to the back of the stacking order (as the context has changed).

However, iOS 6 does things differently. Regardless of the 3D transform, in the example above, it still renders the grey section above the others. The reason for this in iOS 6 is the -webkit-overflow-scrolling: touch; property. This makes iOS 6 very unhappy if it’s applied to an element and all its decendants. Thankfully we can get around this particular issue fairly easily (I say easily, maybe for you but it took me about an hour and a half to figure out):

A couple of solutions: you can either work around the issue by limiting the -webkit-overflow-scrolling: touch; property to the exact element/level you want to have the touch scroll. For example: .parent-to-have-overflow-not-descendents > * -webkit-overflow-scrolling: touch; instead of .parent-to-have-overflow-not-descendents * -webkit-overflow-scrolling: touch; . Alternatively, if the option exists, you can toggle the property to -webkit-overflow-scrolling: auto;

In the following example I have wrapped the scrolling element in another div to achieve this. Now you should see consistency across iOS 6, iOS 7, Chrome and Safari 6.05. Note, it’s also important that the final element is a block level element and not an inline element.

See the Pen Baunt by Ben Frain ( @benfrain ) on CodePen

So, what’s the take away here? Simple. If you are having problems with z-index’ing items and you have the position property applied and a correct z-index value applied, ensure you don’t have a CSS property such as transform on the root element (or -webkit-overflow-scrolling: touch; on iOS 6). It’s more than likely that this is creating a new stacking context for the enclosed elements.

7 comments:

It took me one minute to read until “Curve balls”. It took me 20 more minutes to get to the end 🙂 Complicated stuff, but well explained.

Wow, thank you so much!

I was running into this very problem yesterday and was totally clueless what happened. You nailed it!

BIG thanks from me to you! I’ve spent best part of today trying to get to the bottom of a stacking order issue on IOS. Read your article and BOOM there’s my problem – a css transform on the offending element! Only wish I’d found your post this morning!

@Marc C — Beautiful. Glad it helped. 🙂

Removing -webkit-overflow-scrolling: touch from body and html fixed it for me… i was driving me nuts!

Thanks so much. life saver

you saved my life thank you! I had a parent container that had -webkit-overflow-scrolling: touch which was messing up my stacking order in iOS safari.

Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass

Select an svg inside an <object> tag with javascript.

BucketPress

CSS translate and z-index problems in Safari browser

When using transform: translate() on a parent element and its child elements requires specific z-index properties, Safari somehow resets/ignores the z-index(es) of the child elements.

Since translate() repositions an element only in the x and y axis, most of us assume that the z axis position should remain unaffected when using the function. However, Safari treats it otherwise – it seems to check that z-index is null and goes on to reset/ignore the z-index of all child elements in order to reposition the element and its children.

The easiest and failproof way to overcome this is to use transform: translate3d() instead. For example, if you need to centralise an element on screen, instead of using transform: translate(50%, -50%) , use transform: translate3d(50%, -50%, 0) , like this:

Doing so makes Safari respect the z-index properties of the child elements.

Fixing z-index issue on Safari browser

by Kiet Huynh · March 21, 2019

The z-index isn’t rendering properly on Safari – but it is working fine on Chrome and Firefox.

On Safari browser, the z-index seems to be ignored. You can’t figure out what the Safari specific bug would be.

Don’t worry! Here is the fix, add this to the content layer and it will magically fix itself.

Happy coding!

How to check if a number is divisible by another number in Shopify

July 21, 2018

7+ Best Shopify Apps For Workforce Management

October 10, 2023

How to embed PDF document file into the page on Shopify

March 23, 2019

[Resolved] Problem with z-index of mobile menu on safari

Home › Forums › Support › [Resolved] Problem with z-index of mobile menu on safari

Start building better websites today.

GeneratePress

Site Library
Brand Assets
We’re Hiring!
Documentation
Support Forums
Archived Support Forums
Fastest WordPress Theme
Install GeneratePress
Plugin Install Failed
WordPress Hosting

Momentum Scrolling on iOS Overflow Elements

Web pages on iOS by default have a “momentum” style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might think that any element with scrolling would have this behavior as well, but it doesn’t. You can add it back with a special property.

Hey Chris, Is there a way to prevent the momentum scrolling on desktop (using a magic mouse or trackpad) as well as on iOS? I have been searching for a long time, but without luck.

Hey David, you can implement a scroll debouncer that can limit to only 1 scroll event being run every few milliseconds. Thing is, it will be far from perfect and in several cases may feel pretty unnatural.

Perhaps I’ll write a simple tutorial for this.

Why would you ever want to do that? That’d be the most annoying thing.

You could check for touch events with modernizr or something like it, and then only apply the rule in certain cases.

Checking for touch events is unreliable. Too many false positives and even at Modernizr they don’t recommend it.

Hey, you could try to use @media feature to see the size of your screen and if it is so small then the code works, but if it is bigger than x value it will not work, for example:

That will only apply to a screen size max of 768px. That’s the simplest way, and it is how many websites do it

if i use -webkit-overflow-scrolling:touch, when page are scrolling, i tap a button to reset the container of scrollTop = 0 , in ios or android, it can stop scrolling but it can’t go to the top of container

Hi this seemed to work really well until Feb 2019 – when there seems to be some rendering issues – anyone else encountered this?

Chris, momentum scrolling doesn’t seem work inside an iframe. I’ve tried several settings, I’ve also tried to iframe in the demo,

http://playground.johanbrook.com/css/touchtest.html

But it doesn’t produce scrollbars 99% of the time. Looking into a hack.

Chandra, did you find a solution to touch scrolling on iframes? I’m getting mad after the same problem…

Yeah, it doesn’t work on iframes. If you wrap the iframe in a container and put the -webkit-overflow-scrolling: touch and overflow-y: scroll on that, it should work. See this Codepen .

Kristie, thanks for the codepen example – it totally solved our problem!

Thanks this works perfectly! Do you have anything to resolve the milisecond lag when clicking on a link on a touch device?

I’m currently using webkit-touch-scrolling to increase performance the performance of scrolling in iPad and iPhone web applications. It has significantly increased performance, but just like most applications that use a timeline like environment with images, the iPad runs out of memory when a lot of ’tiles’ have loaded.

Is there any way to track the scroll position when momentum scrolling? Much like the ‘touchmove’ and ‘scroll’ event? So far I have seen lot of no’s.

My current solution would be to set a variable when the user starts scrolling and set a setTimeout() to an X amount of milliseconds to ‘simulate’ the scroll function.

This is just a little side note, the reason you run out of memory is because apple will only allow you to have 10 mb of ram with web applications. Why would they let you create native like applications on the web? If you could, there would be no reason to pay to be in their app store. We need to hold them accountable.

Had the same problem as you, iOS safari crashing. I debugged this for over a day, because I was sure the memory crash was due to hundreds of Angular hg-repeat elements(empty ones, which loads images upon scroll position).

The funny thing is, when debugging this in iOS Simulator, it doesn’t occur! Another funny fact is that I went from a menu with position:fixed, because the menu pops down when a input field is activated(rendering halts upon window resize), but at the same time changing the input field to a select field which doesn’t pull up the keyboard. So all i all, I just implemented a bug which wasn’t even needed, argh!

For others that might search for this, I will include that the browser crashed upon invoking $location.hash(id) and $anchoScroll().

I tested your demo on Windows Phone (IE10) and both divs. scrolled kinetically.

This is only an issue with iOS. Both Android and WP behave properly without the use of ridiculous proprietary styles.

Exactly what I needed, Chris!

And I think you might be from the future , because you always seem to foresee what I’m going to need next. Very appreciated, man!

So incredibly helpful. Thank you! I was wondering how I managed to accidentally disable the momentum scroll.

Thanks! So relieved CSS fixes this!

Every time I try this style out, some of the content on some of my pages just disappears –– has anyone else had this problem? The elements that disappear still take up space (so it’s not like they’re display:none; ) I can see the content when I look in Chrome’s inspector window, and the yellow indicator points to where my content is supposed be, and it basically points to these invisible divs that have height:0px;

It’s definitely these “momentum scrolling” styles causing this. I’ve tried only deleting those styles, and my content comes back, but then goes poof when I add the them again.

Because I wanted the whole page to have the momentum scrolling, this is how I did my styles:

Any ideas what I might be doing wrong? Any thoughts much appreciated.

Oops – nevermind! Tried adding the style to html instead, worked like a charm. Duh

Yup, you got it right Annie: thanks! It works like a charm. :)

Hey! I sat next to you at the jQuery conference in San Diego! lol

Thank you Annie! I’ve fixed my issue! Change the -webkit-overflow-scrolling to none before to change overflow to hidden so I can prevent the disappearing :)

Thanks buddy!

I noticed that using overflow-y: auto; (from Chris’s example) also works. Tested in the native browser and Chrome of a Samsung tablet with Android 4.0.4 and also on iPad with iOS 6, Safari + Chrome.

overflow-y: auto; is working on all browser for me but not working on iPad. I am using following Style:

.m-scrollable-filter { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }

pls give me any response.

Chris said in the article that overflow-y must be set to scroll for -webkit-overflow-scrolling: touch to work. So use this code instead (there’s no need for !important ):

Anyone have this associated issue and know how to prevent it (or what I’m doing wrong)?…

I have a div within a wrapper div which specifically allows horizontal scrolling but prevents vertical scrolling. Everything is fine except that on ipad it remains possible to vertically lift the entire div, which then bounces back on release. What is more annoying is that this then allows the same div to ‘drag’ diagonally with a diagonal swipe. Here’s the page in progress…

http://raewilkinson.scratchthesky.com/

I fixed this issue with javascript that prevents the default scroll-bounce behaviour in the vertical axis. It works but it’s not ideal. I still have no insight into how the entire div could become ‘dragable’ in every direction.

I had the other case where the content was scrollable in vertical direction. I had this style applied:

Even when there were no need for horisontal scroll, it behaved like if you drag horizontally it moves the content sideways and bounce back. I solved this by doing:

This cause momentum to be used only in y-direction, since momentum is disabled when setting overflow to auto.

You can set it the other way: overflow-y:auto to only use momentum in x-direction.

If I add this: overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch; to the html, or body, or any major block of my website I get no scroll improvements and I cannot tap on the top bar to scroll to the top. Any idea why?

You don’t need to add it to html or body on your webpages; Apple uses momentum scrolling on all pages automatically. -webkit-overflow-scrolling: touch is just for scrolling other elements on the page (only being able to scroll, say, a p ). Also, touch scrolling gives no “scroll improvements” — it just lets you flick your finger to quickly get through something long.

Thank you very much for this, exactly what i needed for fixing the scrolling issue on ios.

Hey — Just thought id take a second to say THANK YOU for this … as much as it seems i should have already known about the -webkit property, had i not seen this i may very well have gone down a dark road trying to implement a javascript replacement for overflow-y … THANK YOU SINCERELY

Just a warning for folks out there finding this great feature – if you are using it in a rule that also includes overflow-x: hidden – beware. Because the -webkit-overflow-scrolling: touch property will allow the user to scroll vertically and horizontally , which may reveal hidden divs that are meant to be hidden to the left or right.

I am facing this exact problem. I loose the vertical momentum scrolling as soon as I add overflow-x: hidden to the html and body tag. Adding -webkit-overflow-scrolling: touch restores the vertical momentum scrolling but breaks my overflow-x: hidden . Is there a way to get away with both? I tried to place the two styles at different places, in the html tag only, in the body tag only, in a wrapper div, always with no luck.

I believe that now (Aug 2018) this is not an issue. I have a website that acts like a full-height app, using position: fixed for full height content blocks that transition into one another, and one of them has overflow-y: auto for when it overflows. I added the -webkit-overflow-scrolling: touch property, as well as the overflow-x: hidden to this block, and it seems to be fine. It definitely helped the scrolling issue we were experiencing in older IOS phones (iPhone 6), and we don’t notice any other side effects (although I’m not sure if I have any content that overflows the left and right). I’d also like to point out that this is working even with overflow-y: auto , despite the code example in this post mentioning it only works on scroll (perhaps now that it’s 2018, IOS has resolved these issues).

Does any one know how to add a auto scrolling function to a horizontal scroll bar???I have some images in a table row and i want that row to auto scroll horizontally but not manually.. Please help me

I have customize scroll using CSS3, its working fine in all browser but the overflow-x is not visible in iphone. Here is the code what I have done. http://codepen.io/anon/pen/aLwhq

works great on ipad, thanks for the tip.

Thank you, this fixed a problem I was having and now the iPhone page looks like it should!

Okay, so when I have overflow-y: scroll; and -webkit-overflow-scrolling: touch; it works fine in most cases… except on the DIV I actually need it.

It’s a fixed DIV. When I load the page in landscape, and there is enough content to need overflow it works, but if I then change the device orientation to portrait (where the content doesn’t need overflow) then back to landscape the DIV no longer scrolls at all!

Please reply on this comment to above comment so I get notifications :P (I wish there were a way to edit such preferences on here!)

Hi Charles, I am also having this same issue, have you got any solution for this?

This was a great find — worked as promised. The only side effect is that child elements with position: fixed now move with the parent’s scrolling, until the momentum stops, and then they snap back into their fixed positions.

Did you ever find a solution to this? I’m having the same issue with a position:fixed navigation header div positioned on the top.

I’m having a similar issue. Fixed child element in container that that has “-webkit-overflow-scroll” moves while scrolling, and in addition, it’s hidden (I think the latter issue is related to z-index being changed when “webkit-overflow-scroll” is applied.

I can confirm that overflow: auto; -webkit-overflow-scrolling: touch; Works if you don’t want to show scroll bars all the time. Thanks for the tip, Chris!

Thanks for the tip Chris; overflow: auto; -webkit-overflow-scrolling: touch; works fine for iPhone media query; but when I used it within media query for iPad (1,2), it was causing the iOS app that was loading the page through iframe, to crash.

It works great for me. But I have another problem. While creating custom scroll, I’m unable to get smooth scrolling. Did I miss something?

Saved my day! However why I would need to add this in the first place is beyond me

Saved my week !!!

Thanks Chris, just made my day too!

Bundle of thanks!

Dear your technique works for me. i was facing problem in scrolling on touch devices, then i give your code to“`

body {overflow-y:scroll}

“` now my website scrolling smooth now.

Wow, that was a life saver.

Why in the world would you disable inertial scrolling by default? Who thought “This developer clearly wants this thing to be scrollable, but he probably wants it to be janky, so let’s make that the default.”?

why overscroll scroll?

Thanks for this, just saved me a few hours. Thanks also to the keywords that got me here.

Crazy how specific some of the controls can be.

Love it! Worked Thanks! :D

You just saved me hours of futzing around. Again. Thanks!

Thank you verry much! Keep on going with this good work, great article!

Words cannot express how grateful I am for this. Thank you!

I have a strange problem. I’ve tried looking everywhere and I can’t find any answers.

I’m using this CSS property ( -webkit-overflow-scrolling ) in an iOS app loaded inside a web view.

As soon as I open the app, it crashes and closes again. The crash report lead me to this page: http://bit.ly/1GobVK2 which suggests that it is caused by this CSS property. Is that legit? Should I continue to try and fix this based on this theory?

Has anyone else had similar issues with this CSS property?

just wanted to say, it actually does work with overflow: auto; , I have it set up and working on a few sites. Thank you for this snippet – don’t know why, but I keep forgetting this exact declaration and come back every time I need it again. ;)

This is really helpful. I was struggling for this issue and after applying -webkit-overflow-scrolling: touch; all the things stated moving smoothly. Thanks man for this :)

Hi, I’m a real tech dummy, so can you please help me and put it really simply like go to settings, go to x, then x, etc. my iPhone 5s screen keeps scrolling and it’s driving me nuts! The screen is clean, it’s a year old. I’ve tried turning it off and on again, no joy. How do I fix it? If it’s a memory thing should I delete some aps? Thanks! :-)

So yeah, didn’t read that it doesn’t work on “auto” and then tried it… Works on auto for me using Cordova on iOS so it might have changed, just a heads up.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

There seems to be a warning on the page to not use ‘-webkit-overflow-scrolling’ on production facing sites.

Thank you! This worked perfectly!!

What a nice solution, it worked perfectly! Thanks!

Hi – when i use -webkit-overflow-scrolling on a div on ios 9+, cordova app it only activates scroll on 2 finger drag. any ideas on a work around?

I know that this is an old post, but…

“Web pages on iOS by default have a “momentum” style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something”

…I believe this statement is actually false. Take any web page, including this very website, and scroll it in mobile Safari. It will not have inertia scrolling. Scrolling stops almost immediately when you lift your finger. Inertia scrolling at the page level isn’t a default at all.

Unless of course I am crazy and am the only person getting these results. Tested in iOS 7, 8 and 9, on 3 devices.

My finding is that you actually do have to use webkit-overflow at the document level. And because most sites don’t, they are seriously missing out.

Helped me a lot. I went from scrolling divs to scrolling page, so now it works on iOS. Has worked perfect on android from the beginning.

I love you!! just what I needed. you saved my app.

It seriously makes a world of difference to enable it, since it really isn’t a default. More info here:

https://ferdychristant.com/the-world-s-most-overlooked-web-optimization-for-ios-d88c7517d520#.r6pijsei7

This fix no longer seems to be working. – Is anybody experiencing the same issue? – Does anybody know how it could be fixed now?

Seems to be working on my iPhone SE, just not on my desktop Mac.

is there a way to make momentum scrolling work and hide the scrollbar permanently ? I tried using ::-webkit-scrollbar et all – looks like they are not compatible with -webkit-overflow-scrolling: touch;

Does anyone know how to get topbar and bottom bar for iphone to hide? In iOS 9 it is standard, but with this scrolling that standard disappears..

You saved me again. Thanks!

Try this it’s working for me

if (window.location == window.parent.location && navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { $(‘#orderpop’).attr(‘style’, ‘-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;’); }

What about other prefixes, -moz-, -khtml-, -o-, -ie-, or is this specifically for safari only? Does this need to be done for android too? What other prefixes would be needed for those?

Thid demo and in my project don’t work on iPad(MD329LL/a) with 7.0.4(11B554a)

Thank you for this. I had such a hard time even finding the right thing to call this that I almost gave up on it. Amazing how little it’s actually used in things like responsive menus. I’m even finding paid plugins and whatnot that don’t even use this.

It works fine for scrolling but lazy loading stopped working. After touchmove event the is still scrolling and unable to load the images. How to fix this?

This no longer requires overflow-y to be scroll – it can be set to auto and have the intended effect only once the content goes over the element’s bounds causing a scrollbar.

overflow-y: scroll; /* has to be scroll, not auto */

I could be mistaken, but I don’t think this is true? I have overflow-y: auto set and momentum scrolling seems to be working fine in iOS.

Some things are just that easy. After hours of debugging and searching i found this simple solution… and it even works in cordova/phonegap. Next time i visit this site first. Thank you. CSS-Tricks 4TW!

Works perfectly, thanks so much!

This worked and is much more pleasant BUT the container that was scrolling horizontally had elements with hover states that would activate when touched on iOS, now they do not respond to touch, so I will probably have to scrap the inertia scroll since the information displayed on hover is more important :(

I want Same scrolling Feature in android devices

Here postcss plugin https://npmjs.com/package/postcss-momentum-scrolling

Just to reiterate the sprinkled comments in here:

THIS BREAKS SCROLL NOTIFICATION

I appreciate the article as it does give inertial scrolling back, but a few developers in here (Jessie, Nishant, Charles) have noted that they no longer receive scroll events when this is turned on. This is imported for our application. We do get one event when inertial scrolling finally stops to exactly 0 but this does not help our use cases. We need events WHILE the scrolling is occuring, as we get when this is not in or as we get on other products with inertial scrolling. Jessie, thanks for the setTimeout and track solution. I will probably simulate it this way until we find another answer.

This fix no longer seems to be working. – Is anybody experiencing the same issue? – Does anybody know how it could be fixed now?

According to this it is no longer needed: https://ferdychristant.com/why-ios-11-is-great-news-for-the-web-345c43cc55db

Thanks for that tips it’s working really well ! But I have a problem, the scrollbar appear, while I put ‘ ::-webkit-scrollbar { display: none; }.

Can you help me to make it transparent, or customize it ?

Hi! Nice post, thx! There is a problem when using the animation on the page. Content when scrolling begins to “dance”. Has anyone encountered, tried to fix?

Great. This was useful to see. We use this in the credits within our game.

webkit-overflow-scrolling: auto not work on my iPad now.

“webkit-overflow-scrolling” no more works in ios 13 as ios 13 has by default enabled the momentum scrolling in any scrollable container but I do not want that behavior. Anyone have any idea how can I disable momentum scrolling on my webpage?