Off-Canvas-Konflikt mit Cover-Hintergrundbildern - zurb-foundation

Ich verwende einige Hintergrundbilder mit Hintergrundgröße: cover ;. Es lief in Ordnung, bis ich das Off-Canvas-Menü der Foundation hinzufügte. Die Hintergrundbilder werden nicht in Chrome angezeigt.

Irgendeine Idee, wie man das beheben kann?

Vielen Dank!

Antworten:

0 für die Antwort № 1

Es ist ein Problem mit dem Backface, wahrscheinlich auf der Chrome-Seite. Sie können es mit dem folgenden css-Code überschreiben

.off-canvas-wrap, .inner-wrap {
-webkit-backface-visibility: visible;
}

-1 für die Antwort № 2

Es tut mir leid, ich dachte, es wäre vielleicht ein häufiges Problem. Das Problem ist nur in Chrome und Opera. Ich habe IE nicht versucht. Hier ist der Code:

<!DOCTYPE html>
<html>
<head>
<title>Test canvas</title>
<link rel="stylesheet" href="css/foundation.css" />
<style>
.fondo-imagen-bn{
height:1000px;
background: url(img/foto-fondo-secciones.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>

<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle show-for-small-only" href="#" >Off Canvas Menu</a>

<aside class="left-off-canvas-menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</aside>

<section class="fondo-imagen-bn">
<h1>Example with cover background</h1>
</section>

<footer style="height:300px;">
<h2>footer</h2>
</footer>


<a class="exit-off-canvas"></a>
</div>
</div>

<script src="/images/js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script src="js/scripts.js"></script>
<script>
$(document).foundation();
</script>