iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

by

You need to trick the browser to use hardware acceleration more effectively. You can do this with an empty three-dimensional transform:

-webkit-transform: translate3d(0, 0, 0)

Particularly, you’ll need this on child elements that have a position:relative; declaration (or, just go all out and do it to all child elements).

It is aot a guaranteed fix, but it is fairly successful most of the time.

Hat tip: iOS 5 Native Scrolling–Grins & Gotchas

More Related Contents:

  1. How do I remove the blue styling of telephone numbers on iPhone/iOS?
  2. How can I autoplay media in iOS >= 4.2.1 Mobile Safari?
  3. Using background-attachment:fixed in safari on the ipad
  4. How to get the scroll bar with CSS overflow on iOS
  5. How would I achieve a shadow that won’t show through transparent text?
  6. Fill in text in HTML5
  7. Fixed background image with ios7
  8. Does height and width not apply to span?
  9. Is there a way to apply a CSS style on HTML5 datalist options?
  10. Show Child Div within Hidden Parent Div
  11. iOS 8 removed “minimal-ui” viewport property, are there other “soft fullscreen” solutions?
  12. How do you disable viewport zooming on Mobile Safari?
  13. Changing three.js background to transparent or other color
  14. Failed to decode downloaded font
  15. How can I ensure that text is inside rounded div?
  16. Which HTML5 reset CSS do you use and why? [closed]
  17. Div height 100% and expands to fit content [duplicate]
  18. Add a text suffix to
  19. html5 vertical spacing issue with
  20. How to position a div in the middle of the screen when the page is bigger than the screen
  21. Nested rows with bootstrap grid system?
  22. How to write a caption under an image?
  23. How do I line up 3 divs on the same row?
  24. Angular dynamic background images
  25. CSS: How to align vertically a “label” and “input” inside a “div”?
  26. Div side by side without float
  27. Prevent iOS bounce without disabling scroll ability
  28. Full background image with fade effect
  29. Is there a way to style HTML5’s range control?
  30. Difference between and with text-align:center;?

Leave a Comment