Using '-Webkit-Overflow-Scrolling: Touch' Hides Content While Scrolling/Dragging

Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging

Have you tried putting the elements into memory?

If not, try putting .items in memory using the css -webkit-transform: translate3d(0,0,0);

You may want to go higher or lower in the nesting depending on performance, ie applying the translate to .page or .item. This will increase the memory used which can get crashy but it helps the browser redraw everything.

Anyways, hope that helps!

-webkit-overflow-scrolling: touch z-index bug on Chrome for Mac OSX

This is fixed on the newest Chrome builds, see http://code.google.com/p/chromium/issues/detail?id=124559.

Webkit Overflow Scrolling causing div's not to show?

Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.

This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR

Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging

Scrolling slow on mobile/ios when using overflow:Scroll

Rather than a performance issue this is likely that your not seeing 'Momentum' scrolling on your iOS device

This can be solved by adding '-webkit-overflow-scrolling:touch' to your scrolling element i.e:

.scrolling-content {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   height:100%; /*A value other than height:auto needs to be set*/
}

By default iOS devices use 'momentum' scrolling on the body but adding 'overflow-y:scroll' to an element does Not set a element to 'momentum' scrolling by default

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

Note: there's a number of Gotcha/Bugs with using -webkit-overflow-scrolling: touch on certain browsers

disabling bouncy scrolling only for html but maintaining for elements with overflow:scroll

It turns out for me that the only effective solution was to use joelambert/ScrollFix script, worked really well with no lags, In fact I am already using it in one of my projects.

You can also check about it in more details on his blog post.
Sorry for the other users who replied but I really didn't get those answers to work for me.

Prevent body scrolling but allow overlay scrolling

Theory

Looking at current implementation of the pinterest site (it might change in the future), when you open the overlay, a noscroll class is applied to the body element (setting overflow: hidden) making the body no longer scrollable.

The overlay created on-the-fly or already injected in the page and made visible via display: block — it makes no difference – has position : fixed and overflow-y: scroll, with top, left, right and bottom properties set to 0: this style makes the overlay fill the whole viewport (but now we are in 2022, so you may use inset: 0 instead).

The div inside the overlay is in position: static so the vertical scrollbar is related to that element. This is resulting in a scrollable but fixed overlay.

When you close the overlay, you have to hide it (using display: none) and you could even remove the node via javascript (or just the content inside, it's up to you but also depends on the nature of the content).

The final step is to also remove the noscroll class applied to the body (so the overflow property gets back to the value it had previously)

---

Code

Codepen Example

(it works by changing the aria-hidden attribute of the overlay in order to show and hide it and to increase its accessibility).

Markup

(open button)

<button type="button" class="open-overlay">OPEN LAYER</button>

(overlay and close button)

<section class="overlay" aria-hidden="true" tabindex="-1">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>

CSS

.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   inset: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }

Javascript (vanilla-JS)

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]'),
    openingBtt;
    
[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 
     
     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';
     
     /* storing a reference to the opening button */
     if (overlayOpen) {
        openingBtt = this;
     }
     
     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);
     
     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;
     
      /* forcing focus for Assistive technologies but note:
    - if your modal has just a phrase and a button move the
      focus on the button
    - if your modal has a long text inside (e.g. a privacy
      policy) move the focus on the first heading inside 
      the modal
    - otherwise just focus the modal.

    When you close the overlay restore the focus on the 
    button that opened the modal.
    */
    if (overlayOpen) {
       overlay.focus();
    }
    else {
       openingBtt.focus();
       openingBtt = null;
    }

  }, false);

});

/* detect Escape key when the overlay is open */
document.body.addEventListener('keyup', (ev) => {
   if (ev.key === "Escape" && overlay.getAttribute('aria-hidden') === 'false') {
      overlay.setAttribute('aria-hidden', 'true');
      body.classList.toggle('noscroll', false);
      openingBtt.focus();
      openingBtt = null;
   }
})

---

Finally, here's another example in which the overlay opens with a fade-in effect by a CSS transition applied to the opacity property. Also a padding-right is applied to avoid a reflow on the underlying text when the scrollbar disappears.

Codepen Example (fade)

CSS

.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

.overlay { 
     position: fixed; 
     overflow-y: scroll;
     inset: 0;
}

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}

MySQL UTF/Unicode migration tips

Some hints:

• Your CHAR and VARCHAR columns will use up to 3 times more disk space. (You probably won't get much disk space grow for Swedish words.)
• Use SET NAMES utf8 before reading or writing to the database. If you don't this then you will get partially garbled characters.

---

Related Topics