0

I try to create parallax-effect, but have serious performance problems in Edge and Safari. Somebody please tell me, how I can avoid this problems?

Example: https://github.com/bashkos/Problem-parallax

qodunpob
  • 109
  • 3

1 Answers1

2

Use transform: translate( ... ) instead of setting bottom and co. Setting transform helps because browsers then render a new drawing layer which gets separated from the rest.

Also it seems to be better to use position: fixed and calculate all values around that fact, since the image is at the same position all the time no matter of the current scroll position. That of course means that you also need to know when to make it visible.

Sidenote: I guess you meant resize in window.addEventListener('recise', ...)

lumio
  • 7,428
  • 4
  • 40
  • 56
  • Already use it https://github.com/bashkos/Problem-parallax/blob/master/assets/script.js#L24 – qodunpob Jul 02 '17 at 14:08
  • Ah sorry, I only saw the `bottom` line. Let me check again – lumio Jul 02 '17 at 14:10
  • 1
    Okay I see what you mean. When I buildt my last parallax site, I had the same problem. What I did was to use `position: fixed` instead of `position: absolute` since it is at the very same position all the time. Of course that makes your calculations a bit trickier I guess – lumio Jul 02 '17 at 14:17
  • It also presupposes specific layout markup, that may be complicated for content website – qodunpob Jul 02 '17 at 14:30
  • with `position: fixed` I have vsync problems, I see white stripes sometimes – qodunpob Jul 02 '17 at 15:30