0

I've got Scroll out plugin, which allows me to add .scroll class whenever i scroll onto the element. Let's say I want to use it on .stream element, to allow the animation I have to have in css

.stream{
 opacity: 0;
}
.stream.scroll{
 opacity: 1;
}

But this plugin only works in google chrome, that means if I use google chrome, everything works perfectly, but when I use smth else, it just doesn't show up, because like in the example, to allow the animation to work, I have to hide the main element and on scroll I will show it.

I just can't think of any simple explanation and I'm pretty sure there is one. I tried something like this, which is condition to work only on chrome, but it didn't work, everything was hidden for an unknown reason.:

.stream{
     opacity: 1;
}
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { 
   .stream{
     opacity: 0!important;
   }
}
.stream.scroll{
 opacity: 1!important;
}

If you would help me out, I would be gratefull, thank you.

Jakub Hampl
  • 195
  • 1
  • 12
  • Is the scroll class actually being added in the browsers where it's not working? – dantheman Jul 30 '20 at 10:18
  • @dantheman93 It is not, if it would be adding the class scroll, it would have worked everywhere. – Jakub Hampl Jul 30 '20 at 10:56
  • Is it also working in other webkit bowsers? I can't see why the javascript wouldn't also work in safari. If so, here are some more options for targeting webkit browsers https://stackoverflow.com/questions/10812093/is-there-a-google-chrome-only-css-hack/23594288 – dantheman Jul 30 '20 at 12:49
  • It could also be not a great plugin that you are using. Have you tried this?https://michalsnik.github.io/aos/ This one always seems to work fo me – dantheman Jul 30 '20 at 12:51
  • @dantheman93 This plugins looks great, pretty easy to set up, I will definitely try it, thank you. Btw. is this plugin working on all the browsers? – Jakub Hampl Jul 30 '20 at 13:00
  • I've used it in all modern browsers, mobile and IE11 so should be fine. – dantheman Jul 30 '20 at 13:02
  • @dantheman93 I tried it, but unfortunately I have the same problem, the plugin is working only in google chrome, you can check it on my website: https://hellk.funsite.cz/ – Jakub Hampl Jul 30 '20 at 13:25
  • Can you try putting your js after the body element, or add the defer attribute to the script tag? – dantheman Jul 30 '20 at 13:33
  • I don't know if you meant this, but I just removed all my javascript for a while. – Jakub Hampl Jul 30 '20 at 13:38
  • When you link to the js do this – dantheman Jul 30 '20 at 13:43
  • You should do this on all scripts in the head, so they load after the page has loaded – dantheman Jul 30 '20 at 13:45
  • Done, the plugin stopped working. – Jakub Hampl Jul 30 '20 at 13:47
  • When I tried to add it to all my references to a jq, bs etc. everything stopped working aswell, so I won't probably use it :D – Jakub Hampl Jul 30 '20 at 13:50
  • Based on your site, I think your issues are that everything loads slowly so the plugins you're using aren't able to correctly measure the elements heights and locations at the right time. Also you have some css that conflicts with the css the plugin provides. – dantheman Jul 30 '20 at 14:03

0 Answers0