search

marrio-h / universal-parallax

Easy parallax plugin using pure javascript. Also works on mobile platforms. Cross browser support.
MIT License
115 stars 24 forks source link

IE Edge #13

Open dsc-ian opened 5 years ago

dsc-ian commented 5 years ago

Jittery on IE edge when scrolling

jeroentja commented 5 years ago

Also jittery on Edge when scrolling

marrio-h commented 5 years ago

Hi, thank you for notifying me! I thought I'd ironed that issue out already, oh well..

I'll have a look at it when I get time. Also, if anyone already got experience with Edge and this behaviour, please let me know :)

Thank you.

alexeypensar commented 5 years ago

I've fixed it using css for edge and ie, cause they don't work the same speed as chrome/firefox/opera with parallax. ie - make bg-attachment to 'scroll'. edge - make bg-attachment to 'fixed'.

// ie fix @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .header { background: scroll url('../img/bg-header.jpg') no-repeat center center; } }

// edge fix @supports (-ms-ime-align:auto) {

.header { background: fixed url('../img/bg-header.jpg') no-repeat center center; }

skidd89 commented 5 years ago

Love the work so far marrio-h, i also just noticed jittery behaviour in IE and Edge, Do you think this is fixable? or should we try and use the CSS tweaks?

marrio-h commented 5 years ago

@alexeysreda nice thank you! I'll add the CSS when I get home and do a new publish. @skidd89 Thank you :) I'll notify here later today when it's ready for an npm up.

Cheers guys! 🎉

alexeypensar commented 5 years ago

nice thank you! I'll add the CSS when I get home and do a new publish. Hi! I recommend to check css-hacks from http://browserhacks.com/ before it. I use these 2 hacks, but they are may be not the best ways to solve the problem.

djkrysr commented 4 years ago

Did you ever solve the problem with Microsoft Edge browsers, I found this code and thought it was brilliant, it works on desktop & mobile, smooth and easy to use ... then I tried Edge and it's unusable. At the moment I have added @supports (-ms-ime-align:auto){.parallax__container .parallax {transform-style: flat;transform: none;background-attachment:fixed;}} to the CSS, which makes the background fixed in place on Edge browsers but still with a parallax(ish) effect, which is better than nothing however I wondered if you had solved it completely.