Parts of page are invisible when scrolling on Safari 7 with position:fixed elements

Mike Marcacci

There's a pretty big bug in Safari 7 on both Mac and iOS that's hard to find anything on, but is pretty easy to fix.

In some situations when using position:fixed, Safari 7 fails to draw part of the page when scrolling. This can be seen at http://ruelculture.com/glitchy.html by clicking on the arrow, waiting a bit and trying to scroll back up.

Mike Marcacci

To fix this, force hardware acceleration on the disappearing element by adding the following CSS hack:

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

See it in the wild at http://ruelculture.com/. That's it!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

iOS Safari issue - Element becomes invisible while scrolling when changing position absolute to fixed

From Dev

Mobile safari position:fixed z-index glitch when scrolling

From Dev

Fixed position not working in Safari 7

From Dev

JQuery Position:Fixed 'NAVBAR' by scrolling the page

From Dev

JQuery Position:Fixed 'NAVBAR' by scrolling the page

From Java

Safari in ios8 is scrolling screen when fixed elements get focus

From Dev

Horizontal scrolling not working when position absolute/fixed

From Dev

macgap scrolling issue when position fixed

From Dev

Fixed position element is flashing in Chrome when scrolling

From Dev

How to detect scrolling in div when position is fixed

From Dev

macgap scrolling issue when position fixed

From Dev

Position fixed acting like position relative ( scrolling with page )

From Dev

Mac Safari Font Rendering changes thinner when any Element on the page gets position:fixed;

From Dev

Overlaying a Fixed Header Over Elements When Scrolling

From Dev

Get all elements with `position:fixed` in an HTML page?

From Dev

Make a relative position div follow a fixed position div when scrolling

From Dev

adding "position: fixed;" prevents all scrolling, even on unattached elements

From Dev

How to force Safari to repaint position:fixed elements on scroll?

From Dev

Prevent page scrolling to top upon adding fixed position

From Dev

Need a CSS solution to stay top left with page scrolling (not position:fixed)

From Dev

iPhone: Fixed position Div invisible

From Dev

Position absolute but with fixed scrolling

From Dev

disappearing position fixed header in ios7 mobile safari

From Dev

CSS Fixed position menu - scrolling issue when resizing the browser

From Dev

Fixed Page Scrolling

From Dev

Change background of fixed header when scrolling past elements

From Dev

How to make fixed elements hide on scroll and then appear when the user is not scrolling

From Dev

Change background of fixed header when scrolling past elements

From Dev

Fixed navigation menu content not scrolling with page horizontally, when zoomed in

Related Related

  1. 1

    iOS Safari issue - Element becomes invisible while scrolling when changing position absolute to fixed

  2. 2

    Mobile safari position:fixed z-index glitch when scrolling

  3. 3

    Fixed position not working in Safari 7

  4. 4

    JQuery Position:Fixed 'NAVBAR' by scrolling the page

  5. 5

    JQuery Position:Fixed 'NAVBAR' by scrolling the page

  6. 6

    Safari in ios8 is scrolling screen when fixed elements get focus

  7. 7

    Horizontal scrolling not working when position absolute/fixed

  8. 8

    macgap scrolling issue when position fixed

  9. 9

    Fixed position element is flashing in Chrome when scrolling

  10. 10

    How to detect scrolling in div when position is fixed

  11. 11

    macgap scrolling issue when position fixed

  12. 12

    Position fixed acting like position relative ( scrolling with page )

  13. 13

    Mac Safari Font Rendering changes thinner when any Element on the page gets position:fixed;

  14. 14

    Overlaying a Fixed Header Over Elements When Scrolling

  15. 15

    Get all elements with `position:fixed` in an HTML page?

  16. 16

    Make a relative position div follow a fixed position div when scrolling

  17. 17

    adding "position: fixed;" prevents all scrolling, even on unattached elements

  18. 18

    How to force Safari to repaint position:fixed elements on scroll?

  19. 19

    Prevent page scrolling to top upon adding fixed position

  20. 20

    Need a CSS solution to stay top left with page scrolling (not position:fixed)

  21. 21

    iPhone: Fixed position Div invisible

  22. 22

    Position absolute but with fixed scrolling

  23. 23

    disappearing position fixed header in ios7 mobile safari

  24. 24

    CSS Fixed position menu - scrolling issue when resizing the browser

  25. 25

    Fixed Page Scrolling

  26. 26

    Change background of fixed header when scrolling past elements

  27. 27

    How to make fixed elements hide on scroll and then appear when the user is not scrolling

  28. 28

    Change background of fixed header when scrolling past elements

  29. 29

    Fixed navigation menu content not scrolling with page horizontally, when zoomed in

HotTag

Archive