Hi there, I'm trying to debug an issue I'm seeing on my site in development. I've implemented Drew Wilson's Apple tvOS plugin on my site, which works great everywhere on the site, except when trying to run on a page that is also running LayerSlider.
It's obvious that there's a Javascript conflict going on here, but I can't seem to locate it. I'm fairly certain it isn't with the Apple tvOS plugin as it's extremely streamlined and lightweight (~2KB). I've attempted to enable/disable some of the advanced settings within the LayerSlider dashboard, but no luck. Any ideas?
It seems to be caused by the Apple tvOS plugin. The issue immediately go away if I remove the transform: perspective(1050px); CSS setting from the .image.atvImg element. Hovering over the tvOS tile also applies a lot of transforms that interferes with other parts of the page. The issue is purely based on CSS and not JavaScript. If you apply a higher z-index on the LayerSlider container element (.ls-container) you can workaround it.
One issue I discovered is that you need to set a higher z-index on the slider element to completely eliminate the strange behaviour when hovering over the tvOS tiles. The breakpoint seems to be at 1035, but I would make sure and apply an even greater value just in case.
The slider works properly on mobile for me, even though the first slide appears to be blank. This is due to some media playback limitations on mobile devices. With the exception of newer tablets, most mobile OS/browser do not allow autoplaying video, and they might not even display a poster image. Unfortunately, there is no solution for this particular situation at the moment, other than using a slide background as a fallback static image.
Thank you again for your quick response. It was indeed a z-index issue. I had already modified the LayerSlider container's z-index, but didn't specify the z-index for my tiles. Once I established that value it began working properly. Thank you for your help.
Any idea why the shadows aren't rendering properly in Safari, though? I'm not sure if this is related to LayerSlider still or not. Thank you.
It's definitely not related to LayerSlider, both issues come from the tvOS plugin. The z-index solution was just an easy workaround.
Safari has some weird graphical glitches when it comes to 3D transforms. We also had to deal with that in LayerSlider and it wasn't easy. I assume the tvOS plugin author didn't notice them, as it affects his own demo site as well. You can see the same weird effect under the tile, just less visibly.
Good call. Thanks John. I went ahead and reduced the shadow blur radius so it isn't quite as visible.
While, I have this ticket open, can I ask you about a different LayerSlider issue? I noticed on Safari that my full-width video slide isn't full-width. I've attached a couple of screenshots to show you what I have set up on the backend. Any ideas?
I can see the issue, but I'm not yet sure what's causing it. I suspect to other scripts since nobody reported an issue like this and we couldn't reproduce it on our end. Please try to temporarily removing scripts and other stylesheets to see if it helps.
Hi there, I'm trying to debug an issue I'm seeing on my site in development. I've implemented Drew Wilson's Apple tvOS plugin on my site, which works great everywhere on the site, except when trying to run on a page that is also running LayerSlider.
With LayerSlider: http://109.199.111.153/~alpha/byers-2/
Without LayerSlider: http://109.199.111.153/~alpha/byers-2/apple/
It's obvious that there's a Javascript conflict going on here, but I can't seem to locate it. I'm fairly certain it isn't with the Apple tvOS plugin as it's extremely streamlined and lightweight (~2KB). I've attempted to enable/disable some of the advanced settings within the LayerSlider dashboard, but no luck. Any ideas?
Dear designdiva3,
It seems to be caused by the Apple tvOS plugin. The issue immediately go away if I remove the transform: perspective(1050px); CSS setting from the .image.atvImg element. Hovering over the tvOS tile also applies a lot of transforms that interferes with other parts of the page. The issue is purely based on CSS and not JavaScript. If you apply a higher z-index on the LayerSlider container element (.ls-container) you can workaround it.
Best Regards,
John | Kreatura Dev Team
Thank you for your response, John. I forgot to mention that the issue shows up in Safari, but perhaps you've already figured that out.
In any case, I updated the z-index of .ls-container and removed the transform from the .image.atvImg element, but still no luck. Did I miss something?
http://109.199.111.153/~alpha/byers-2/
Thanks again.
One issue I discovered is that you need to set a higher z-index on the slider element to completely eliminate the strange behaviour when hovering over the tvOS tiles. The breakpoint seems to be at 1035, but I would make sure and apply an even greater value just in case.
The slider works properly on mobile for me, even though the first slide appears to be blank. This is due to some media playback limitations on mobile devices. With the exception of newer tablets, most mobile OS/browser do not allow autoplaying video, and they might not even display a poster image. Unfortunately, there is no solution for this particular situation at the moment, other than using a slide background as a fallback static image.
Best Regards,
John | Kreatura Dev Team
Hi John,
Thank you again for your quick response. It was indeed a z-index issue. I had already modified the LayerSlider container's z-index, but didn't specify the z-index for my tiles. Once I established that value it began working properly. Thank you for your help.
Any idea why the shadows aren't rendering properly in Safari, though? I'm not sure if this is related to LayerSlider still or not. Thank you.
http://109.199.111.153/~alpha/byers-2/
It's definitely not related to LayerSlider, both issues come from the tvOS plugin. The z-index solution was just an easy workaround.
Safari has some weird graphical glitches when it comes to 3D transforms. We also had to deal with that in LayerSlider and it wasn't easy. I assume the tvOS plugin author didn't notice them, as it affects his own demo site as well. You can see the same weird effect under the tile, just less visibly.
Best Regards,
John | Kreatura Dev Team
Good call. Thanks John. I went ahead and reduced the shadow blur radius so it isn't quite as visible.
While, I have this ticket open, can I ask you about a different LayerSlider issue? I noticed on Safari that my full-width video slide isn't full-width. I've attached a couple of screenshots to show you what I have set up on the backend. Any ideas?
http://109.199.111.153/~alpha/byers-2/
Thanks for bearing with me. :)
I can see the issue, but I'm not yet sure what's causing it. I suspect to other scripts since nobody reported an issue like this and we couldn't reproduce it on our end. Please try to temporarily removing scripts and other stylesheets to see if it helps.
Best Regards,
John | Kreatura Dev Team