Menu icon Foundation
Off-canvas issue. Artifacts with fixed footer / z-index:-1

Hello,

I am seeing some Artifacts in my footer when I scroll.

The footer is fixed to the bottom, with a z-index: -1. Overtop is a 1px width, 300px high transparent div, when you scroll the footer appears like a curtain (parallax feel).

It works fine and looks great accept when wrapped in the off-canvas-wrap or I change the z-index to higher then -1 (loose my affect).

Any suggestions on what exactly is causing this issue? I don’t mind loosing animation on ‘Off-canvas’ if that would allow me to keep my reveal footer.

Its just not right Jerry!

Not right

off-canvasz-indexparallaxartifactsfooter

Hello,

I am seeing some Artifacts in my footer when I scroll.

The footer is fixed to the bottom, with a z-index: -1. Overtop is a 1px width, 300px high transparent div, when you scroll the footer appears like a curtain (parallax feel).

It works fine and looks great accept when wrapped in the off-canvas-wrap or I change the z-index to higher then -1 (loose my affect).

Any suggestions on what exactly is causing this issue? I don’t mind loosing animation on ‘Off-canvas’ if that would allow me to keep my reveal footer.

Its just not right Jerry!

Not right
Rafi Benkual almost 5 years ago

We'll need to see a link to site to help you more. We're using off-canvas on all our sites without this issue.

Jayson Brown almost 5 years ago

PS I cant even interact with the footer, but it works fine outside of off-canvas-wrap ...