Salve,

Nella pagina principale del mio sito www.valsileprova.altervista.org, in cui uso fullpage.js nella seconda e terza slide ho problemi di visualizzazione con safari e android browser, forse perchè nella terza slide uso la flexbox, come si puó rimediare?
Grazie
luigi

Di seguito css e html della terza slide

codice:
#section2{

background-color: white;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.flipcontainer {
position:relative;
height:2.5em;
color: black;
padding:20px;
font-size:2em;
text-align:center;	
perspective: 1000; background-color:transparent;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}

.flipcard{
position:relative;
width: 100%;
height: 100%;	
transform-style: preserve-3d;
transition: all 0.3s linear;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;	
}
.flipcard h2{ position:relative; padding:18px}
#ul .flipcard h2{ position:relative; padding:5px; line-height:1em}

.flipcontainer:hover .flipcard{
transform: rotatex(180deg);
}
.front{
position: absolute;
width: 100%;
height: 100%;
background-color:rgba(255,255,255,170) ;
opacity:0.8;
border:solid 4px black;	
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
font-family: josefin-sans, sans-serif;
z-index:999
}

.back{
position: absolute;
width: 100%;
height: 100%;
opacity:0.8;
border:solid 4px white;	
transform: rotatex(180deg);
background-color:transparent;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
font-family: josefin-sans, sans-serif;
}
.back h2, .back h2 a{
color: white ;
font-family: josefin-sans, sans-serif;
font-weight:100;
z-index:999
}

#section2 p{
opacity: 1;
line-height:1.5em;
font-size:1.1em;

}

#ul h2{
color: black;

}
#ul .back{
border:solid 4px black;

}

.contentflex{


display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

padding-right:1.9em;
padding-left:2em;
padding-bottom:0;
padding-top:0;
justify-content: center;
height: 20em	
}

.flex-item{

width: 50%;
padding-right:10%; 
padding-left:10%;
padding-top:5%;
padding-bottom:5%;
}

#ur{background-color: rgba(230,85,85,255) ;
background-image:url(Images/home/coronavata.jpg);
background-size: cover;
background-repeat:no-repeat;
background-position:bottom;

}

#ul{background-color: white;

}
#dr{background-color:rgba(175,233,221,255);
background-image:url(Images/home/coroorchestra.jpg);
background-repeat:no-repeat;
background-position:bottom;
}
#dl{background-color:rgba(175,233,221,255);
background-image:url(Images/home/corosx.jpg);
background-repeat:no-repeat;
}
#u{
position:relative;}
#d{
position:relative;
}
HTML

codice:
<div class="section" id="section2">
<div class="content">
<div class="contentflex"id="u">
<div class="flex-item" id="ul">
<div class="flipcontainer"><a href="il%20maestro.html" target="_self">
<div class="flipcard">
<div class="front"><h2>Il Direttore: <br> 
Livio Schiavato</h2></div>
<div class="back"><h2>Il Maestro: <br>Livio Schiavato</h2></div> 
</div></a>
</div>

</div>

<div class="flex-item" id="ur">
<div class="flipcontainer"><a href="registrazioni.html" target="_self">
<div class="flipcard">
<div class="front">
<h2>Le Registrazioni</h2></div>
<div class="back">
<h2>Le Registrazioni</h2></div> 
</div></a>
</div>
</div>
</div>
<div class="contentflex" id="d">
<div class="flex-item" id="dl">
<div class="flipcontainer"><a href="unisciti_al_coro.html" target="_self">
<div class="flipcard">
<div class="front"><h2>Unisciti al coro!</h2></div>
<div class="back"><h2>Unisciti al coro!</h2></div> 
</div></a>
</div>
</div>

<div class="flex-item" id="dr">
<div class="flipcontainer"><a href="repertorio.html" target="_self">
<div class="flipcard">
<div class="front"><h2>Il Repertorio</h2></div>
<div class="back"><h2>Il Repertorio</h2></div> 
</div></a>
</div>
</div>
</div>
</div>

</div>