I'm having a CSS development issue for a Slide, only in the Firefox browser. For the site I'm using a Jquery Malsup slide plugin
Slide works seamlessly in other browsers, except in Firefox's Desktop mode. (Version 54.0.1) See the pictures.
Thehomepageisempty,butifyouscrollthepagetotherighttheimagewentthere..Ialreadyaddmargin-left0.left:0
anditdoesnotresolve,itonlyadjustsifIchangetheInline-Block
propertytoblock
,butthenIenduphavingproblemwiththeslidetransitionsthatlookstrange,belowmycode.Tips?
HTML/PHP
<!--Slide--><!--BlocodoSlideeconfigsdetipoebotão--><divclass="cycle-slideshow"
data-cycle-caption-plugin="caption2"
data-cycle-timeout="3500"
Data-cycle-auto-height="container"
data-cycle-pager=".cycle-pager"
>
<?php
// repassando os parametros para a consulta e armazenando na variavel $result
$result = $objeto->SlideConsulta();
// percorrendo o array através de um laço para exibir as imagens
foreach($result as $dados){
$linkslide = $dados->caminhourl;
?>
<img src="<?=$dados->caminho?>" alt="<?=$dados->descricao?>" data-cycle-desc="<?=$dados->descricao?>" onclick="clickslide('<?=$linkslide?>')">
<?php
// fim foreach
}
?>
</div>
<div class=cycle-pager></div>
CSS
/***************************** SLIDESHOW **********************************************/
.cycle-slideshow {
display: inline-block;
width: 100%;
margin-top: -325px;
left: 0px;
/* exibindo a mão (no mouse) ao passar em cima da imagem */
cursor: pointer;
}
/* pager */
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
margin-top: -100px;
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 80px;
width: 33px;
height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active {
color: #cc6666;
}
.cycle-pager > * { cursor: pointer;}
/* IMAGEM */
.cycle-slideshow img {
width: 100%;
height: auto;
display: inline-block;
}
.cycle-caption {
top: 10px;
position: absolute;
color: white;
bottom: 15px;
right: 15px;
z-index: 700;
}
/* overlay * Caption Slide */
.cycle-overlay {
position: absolute;
background: rgba(0, 0, 0, 0.4);
color: #fff;
bottom: 0;
width: 100%;
z-index: 600;
color: white;
font-size: 2rem;
padding: .6rem;
}