Fullscreen Swift Slider's hidden area overlaying a button below it

[Vitor Goersch]

Hi guys,

My site has a Swift Slider set as fullscreen in the Page Header / Slider area of this home page. It works rather fine except for the fact that when I scroll half a screen down and some of the background image gets hidden by the parallax effect, the slider container keeps overlaying the content below it, so a button in this content area is visible but not clickable.

The problem disappear whenever the whole slider is offscreen. It also seems to happen only on Chrome (Mac or PC) and Safari.

I had a max height set in the page settings but even after leaving it blank it still happens.

Is this fixable by css only?

thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

I not 100% sure I see the issues you mentioned, is this for only a certain browser or Windows issue?

I’m on Mac + Chrome.

Thanks.

[Vitor Goersch]

Hi David,

Yes, it’s happening on certain browsers only, but Mac + Chrome is exactly where I spotted this. It was the same for Safari but not for Firefox in my machine but I also used the Sauce Lab app to test it on other platforms and browsers and saw that it also happened on Win + Chrome. Other browsers seem to work fine.

I hope it is clear what the problem actually is. It is not something visual as much as a usability problem. If I use the Continue button on the slider to scroll all the way down to next content area, everything goes fine. But if I scroll down myself and some part of the slider is still visible, I can’t click the SAIBA MAIS button nor does it show its hover effect. It is as if the layer in which the hidden part of the slider image is sits on top of the button. I can’t select the text in this area either because it is also “under” this hidden layer, though this is a far lesser problem.

Please tell me if this is clearer.

thanks

[David Martin – Support]

Hi,

Ah yes I see also. Can you test this:

.swift-slider-outer {
    z-index: 0;
}

Thanks.