Menu icon Foundation
Off Canvas Back-Link Overlay Transition

The off canvas back-link overlay should fade in within 300 ms:

.move-right .exit-off-canvas {
    transition: background 300ms ease;
    background: rgba(255, 255, 255, 0.2);
}

Foundation 5

This works fine in:

- Firefox 29 (OS X)
- Chrome 35 (OS X)
- Chrome 35 (Android 4.2.2)

In the following browsers, however, the overlay just appears without any background transition:

- Safari 7 (OS X)
- Safari (iOS 7)
- Chrome (iOS 7)

Any ideas how to fix this?

off canvasoverlaybackground transition

The off canvas back-link overlay should fade in within 300 ms:

.move-right .exit-off-canvas {
    transition: background 300ms ease;
    background: rgba(255, 255, 255, 0.2);
}

Foundation 5

This works fine in:

- Firefox 29 (OS X)
- Chrome 35 (OS X)
- Chrome 35 (Android 4.2.2)

In the following browsers, however, the overlay just appears without any background transition:

- Safari 7 (OS X)
- Safari (iOS 7)
- Chrome (iOS 7)

Any ideas how to fix this?

Lyn about 5 years ago

Hey there,

Did you try using vendor prefixes ?

.move-right .exit-off-canvas {
    -webkit-transition: background 300ms ease;
    -moz-transition: background 300ms ease;
    -o-transition: background 300ms ease;
    transition: background 300ms ease;
    background: rgba(255, 255, 255, 0.2);
}

Regards,

Lyn.

Karl Ertl about 5 years ago

Yes, this was my first idea, too. I tried the Webkit prefix and tested it in Safari (both desktop and mobile). Doesn't make a difference, unfortunately.

Karl Ertl about 5 years ago

I found a (quick and dirty) solution. Adding the following CSS rule resolves the problem:

.exit-off-canvas {
    display: block;
}