Css erros no Iframe

[TheMidter 3]

fiz uma pagina principal que dentro dela funcionara o site, com iframe, estava tudo certo até que resolvi colocar sobras em alguns textos, tenho uma div de apresentação de slides e sempre que o slide muda com o transition as sombras de todo o site de movem um pouco e depois voltam e ficam repetindo isso conforme o slide muda, pensei que o problema era no css, ou talvez eu estivesse usando duas classes iguais, mas não era nada disso, quando tirei do iframe o site funcionou perfeitamente, mas a pagina dentro do iframe o css da div de slides interfere nas sombras de textos de outras partes do site que não tem nada a ver com o slide, como arrumar esse problema no iframe?

[Kaíque Luan 0]

 

fiz uma pagina principal que dentro dela funcionara o site, com iframe, estava tudo certo até que resolvi colocar sobras em alguns textos, tenho uma div de apresentação de slides e sempre que o slide muda com o transition as sombras de todo o site de movem um pouco e depois voltam e ficam repetindo isso conforme o slide muda, pensei que o problema era no css, ou talvez eu estivesse usando duas classes iguais, mas não era nada disso, quando tirei do iframe o site funcionou perfeitamente, mas a pagina dentro do iframe o css da div de slides interfere nas sombras de textos de outras partes do site que não tem nada a ver com o slide, como arrumar esse problema no iframe?

 

 

Posta o código fica melhor para analisar o erro.

[TheMidter 3]

Ta ai o código da div slide:

 

css:

a,img {border: none;}
.trs {-webkit-transition:all ease-out 0.4s;
    -moz-transition:all ease-out 0.4s;
    -o-transition:all ease-out 0.4s;
    -ms-transition:all ease-out 0.4s;
    transition:all ease-out 0.4s;
	width:400px;}	

#slider-m {position: relative; z-index: 1;}
#slider-m a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);-webkit-filter: blur(20px);}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;-webkit-filter: blur(0px)!important;}
 
/*controladores*/
.myslids span {background: rgba(0, 0, 0, 0.56);cursor: pointer;opacity: 0;filter:alpha(opacity=0);position: absolute;bottom: 40%;width: 27px;height:43px;z-index: 5;border-radius: 4px;}
.next {right: 7px;}
.next:before,.next:after {left: 15px;}
.next:before {
    -webkit-transform: rotate(-42deg);
    top: 5px;
}
.next:after {
    -webkit-transform: rotate(-132deg);
    top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
    height: 20px;
    background: #fff;
    width: 1px;
    position: absolute;
}
.prev {left: 6px;}
.prev:before,.prev:after {left: 10px;}
.prev:before {
    -webkit-transform: rotate(42deg);
    top: 5px;
}
.prev:after {
    -webkit-transform: rotate(132deg);
    top: 19px;
}
 
.myslids:hover span {opacity: 0.76;filter:alpha(opacity=76);}
    .myslids {
    width: 309px;
    height: 211px;
    position: relative;
    overflow: hidden;
	background-color: #E5E5E5;
	padding: 1px;
	margin:0px;
	float:left;
}
.try{
border:1px solid rgba(0, 0, 0, 0.26);
position:relative;font-size: 11px;font-family:Arial, sans-serif;
top: 164px;
right: -80px;
color: #fff;background: rgba(0, 0, 0, 0.46); line-height: 42px; z-index: 5;text-align: center;
width:96%;
-webkit-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
opacity: 0;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.atived {
 
position:relative;
right: -12px;
-webkit-transition: 0.9s ease-in;
-moz-transition: 0.9s ease-in;
-o-transition: 0.9s ease-in;
transition: 0.9s ease-in;
color: #fff; line-height: 42px; z-index: 5;opacity: 10;text-align: center;
 
}
 
.ativedfast {
 
position:relative;
right: -12px;
-webkit-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-o-transition: 0.1s ease-in;
transition: 0.1s ease-in;
color: #fff; line-height: 42px; z-index: 5;opacity: 10;
} 

html:

<div class="myslids">
<span class="trs next"></span>
<span class="trs prev"></span>
<div id="slider-m">
<a href="#" class="trs"><img src="images/slides/imagem1.png" alt="Legenda da imagem 1" /></a>
<a href="#" class="trs"><img src="images/slides/imagem2.png" alt="Legenda da imagem 2" /></a>
</div>
<div id="peguee" class="try"></div>
</div>

javascript:

window.onload = function setaImagem(){
    var settings = {
        primeiraImg: function(){
            elemento = document.querySelector("#slider-m a:first-child");
            elemento.classList.add("ativo");
            this.legenda(elemento);
						var intervalo = setTimeout(settings.adddd,3000);
var intervalo = setTimeout(settings.tirar,-0050);
        },
		
		adddd: function(){
			elementou = document.getElementById("peguee");
			elementou.classList.add("atived");
			
		 },
		 addddfast: function(){
			elementou = document.getElementById("peguee");
			elementou.classList.add("ativedfast");
			
		 },
		  tirar: function(){
			elementou = document.getElementById("peguee");
			elementou.classList.remove("atived");
			elementou.classList.remove("ativedfast");
			
		 },
 
        slide: function(){
            elemento = document.querySelector(".ativo");
 
            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
 var intervalo = setTimeout(settings.adddd,3000);
var intervalo = setTimeout(settings.tirar,-0050);
        },
 
        proximo: function(){
            //clearInterval(intervalo);
            elemento = document.querySelector(".ativo");
 
            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
			
           // intervalo = setInterval(settings.slide,2000);
		   var intervalo = setTimeout(settings.tirar,0000);
			var intervalo = setTimeout(settings.addddfast,0400);

        },
 
        anterior: function(){
           // clearInterval(intervalo);
            elemento = document.querySelector(".ativo");
 
            if(elemento.previousElementSibling){
                elemento.previousElementSibling.classList.add("ativo");
                settings.legenda(elemento.previousElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");						
                elemento = document.querySelector("#slider-m a:last-child");
                elemento.classList.add("ativo");
                this.legenda(elemento);
            }
        },
		pause: function(){
           window.clearInterval(intervalo);
        },
		continua: function(){
		setTimeout(settings.slide,3000);
			intervalo = setInterval(settings.slide,10000);
        },
 
        legenda: function(obj){
            var legenda = obj.querySelector("img").getAttribute("alt");
			document.getElementById("peguee").innerHTML = legenda;
        }
 
    }
 
 //chama o slide
settings.primeiraImg();
 
//chama a legenda
settings.legenda(elemento);
 
    //chama o slide à um determinado tempo
    var intervalo = setInterval(settings.slide,10000);
    document.querySelector(".next").addEventListener("click",settings.proximo,false);
    document.querySelector(".prev").addEventListener("click",settings.anterior,false);
	document.querySelector(".myslids").addEventListener("mouseover",settings.pause,false);
	document.querySelector(".myslids").addEventListener("mouseleave",settings.continua,false);
}

Acho que o erro não esta no codigo, pois ele funciona perfeitamente quando não esta dentro de iframe, mas quando eu coloco essa pagina dentro do iframe, toda vez que o slide muda, muda as sombras de todas as divs.

 

peguei nesse site: http://tableless.com.br/criando-slideshow-zero-com-javascript-puro-2/

[robertomurta 0]

Você consegue passar o link para visualizarmos, porque esse código sozinho, mesmo no iframe funciona normalmente, provavelmente é um conjunto entre os componentes que estão fora do iframe também.