Slide Problem - Firefox Browser

0

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:0anditdoesnotresolve,itonlyadjustsifIchangetheInline-Blockpropertytoblock,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;
    }
    
asked by anonymous 14.08.2017 / 21:22

1 answer

0

For those of you with the same problem, just do not use the plugin

data-cycle-auto-height=container

This add-on apparently has a bug in firefox browsers only. I stopped using it and called the div as below and then the problem was solved!

  <div class="cycle-slideshow"                
            data-cycle-caption-plugin="caption2"
            data-cycle-speed="800"
            data-cycle-timeout="3000"
            data-cycle-manualSpeed="800"
            data-cycle-prev="#anterior"
            data-cycle-next="#proximo"
            >
    
18.08.2017 / 15:08