4

Tengo un problema con estilos (CSS), he probado una página web en muchos exploradores, sin embargo en Safari no se ven mis botones con imagen, esto ocurre cuando está en vista landscape.

Mi botón tiene el sig. código, esta contenido dentro del contenedor:

.contenedor{
/*	 width: auto; 
*/	/*margin-left: 10%;*/
height: auto;
background: #FFF;
padding: 1px;
border: 10px solid #FFF;
display: flex;
flex-flow: row wrap;
justify-content: center;
border:1px solid #fff;
z-index: 1;
}

.elemento{
	color:#fff;
	width: 180px;
	background: #FFF;
	text-align: center;
	display: flex;
	flex-flow: row;
	justify-content: center;
	border: 15px solid #fff;
    z-index: 2;
}

/*--botones--*/

.button_1 {
    background-image: url(../images/Declaratoria.png);
    border: none;
    background-repeat: no-repeat;
    height: 3.45cm;
    width: 4.34cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_2 {
    background-image: url(../images/Bordereau.png);
    border: none;
    background-repeat: no-repeat;
    height: 3.45cm;
    width: 4.34cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_3 {
    background-image: url(../images/Reporte_Fuerte_v2.png);
    border: none;
    background-repeat: no-repeat;
    height: 3.45cm;
    width: 4.34cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_4 {
    background-image: url(../images/Busqueda1.png);
    border: none;
    background-repeat: no-repeat;
    height: 3.45cm;
    width: 4.30cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_5 {
    background-image: url(../images/barrita.png);
    border: none;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .7cm;
    width: 5.05cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_6 {
    background-image: url(../images/Documentos-claro.png);
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .6cm;
    width: 5.1cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_7 {
    background-image: url(../images/Reporte-Claro.png);
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .6cm;
    width: 5.1cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_8 {
    background-image: url(../images/IG-claro.png);
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .6cm;
    width: 5.1cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_9 {
    background-image: url(../images/Documentos-obscuro.png);
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .6cm;
    width: 5.1cm;
    background-position: center;
    z-index: 99px;
}

.button_10 {
    background-image: url(../images/Documentos-claro.png);
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .6cm;
    width: 5.1cm;
    background-position: center;
    opacity: 0.5;
    z-index: 99px;
}

.button_11 {
    background-image: url(../images/Reporte-Obscuro.png);
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .6cm;
    width: 5.1cm;
    background-position: center;
    z-index: 99px;
}

.button_12 {
    background-image: url(../images/IG-obscuro.png);
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .6cm;
    width: 5.1cm;
    background-position: center;
    z-index: 99px;
}

.button_alfa{
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 25px 25px;
    height: .6cm;
    width: 5.1cm;
    background-position: center;
    z-index: 99px;
}

.button_13{
    border: #808185;
    background-repeat: no-repeat;
    border-radius: 9px 9px;
    height: 1.2cm;
    width: 5cm;
    background-position: center; 

}

#button1:active {
    background: url(../images/Declaratoria.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button2:active {
    background: url(../images/Bordereau.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button3:active {
    background: url(../images/Reporte_Fuerte_v2.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button4:active {
    background: url(../images/Busqueda1.jpg) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button5:active {
    background: url(../images/barrita.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button6:active {
    background: url(../images/Documentos-obscuro.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button7:active {
    background: url(../images/Reporte-Obscuro.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button8:active {
    background: url(../images/IG-obscuro.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button9:active {
    background: url(../images/Documentos-obscuro.png) no-repeat bottom;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button10:active {
    background: url(../images/Documentos-claro.png) no-repeat bottom;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button11:active {
    background: url(../images/Reporte-Obscuro.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button12:active {
    background: url(../images/IG-obscuro.png) no-repeat bottom;
    opacity: 100;
    -webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
<aside style="    margin-left: 25px; margin-right: 25px;">
        <img  src="<?=URL::to('Assets/Portal/images/inicio_ok.png')?>"/>
        @if($conjuntoPermisos['cuadro_inicio_seccion_1'] == 1)
        <div class="contenedor" style="    margin-top: -9%;">
	        <div class="elemento elemento1">
	            <a href="{{ URL::to('/Resumen_Declaratoria')}}">
	                <input style="margin-top:0px;" class="button_1" id="button1" onmouseout="this.style.opacity='.5'" onmouseover="this.style.opacity='100'" type="button"/>
	            </a>
	        </div>
	        <div class="elemento elemento2">
		        <a href="{{ URL::to('/Bordereau')}}">
		            <input style="margin-top:0px;" class="button_2" id="button2" onmouseout="this.style.opacity='.5'" onmouseover="this.style.opacity='100'" type="button"/>
		        </a>
	        </div>
		    <div class="elemento elemento3">
		        <a href="{{ URL::to('/Reporte')}}">
		            <input style="margin-top:0px;" class="button_3" id="button3" onmouseout="this.style.opacity='.5'" onmouseover="this.style.opacity='100'" type="button"/>
		        </a>
		    </div>
	    </div>
    	@else
		<div class="contenedor" style="    margin-top: -9%; margin-left:60%;">
			@if($conjuntoPermisos['cuadro_inicio_seccion_2'] == 1)
			<div class="elemento elemento1">
				<a href="{{ URL::to('/EA_Declaratorias')}}" id="AS" style="color:transparent;">
					<img style="margin-top:0px;" width="150" height="150" src="<?=URL::to('Assets/Portal/images/EA_Claro.png')?>"/>
				</a>
			</div>
			@endif
			@if($conjuntoPermisos['cuadro_inicio_seccion_3'] == 1)
			<div class="elemento elemento2">
					<a href="{{ URL::to('/EI_Declaratorias')}}" id="EI" style="color:transparent;">
						<img style="margin-top:0px;" width="150" height="150" src="<?=URL::to('Assets/Portal/images/EI_Claro.png')?>"/>
					</a>
			</div>
			@endif
			@if($conjuntoPermisos['cuadro_inicio_seccion_4'] == 1)
			<div class="elemento elemento3">
				<a href="{{ URL::to('/Admin')}}" id="AL" style="color:transparent;">
					<img style="margin-top:0px;" width="150" height="150" src="<?=URL::to('Assets/Portal/images/AL_Fuerte.png')?>"/>
				</a>
			</div>
			@endif
		</div>
    @endif
</aside>

Ya agregué varios meta, pero solo adapta el tamaño de la pantalla.

<script src="<?=URL::to('Assets/Portal/js/JQuery/jQuery-2.1.4.min.js?v=1.1')?>" type="text/javascript"></script>
<link href="<?=URL::to('Assets/Portal/css/StyleFlex.css?v=1.1')?>" media="all" rel="stylesheet" type="text/css"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	input:focus{
    	outline: none;
	}
</style>
<meta name = "viewport" content = "user-scalable=no, width=device-width">




<!--metas específicos-->


    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <meta charset="utf-8">
    <meta id="book-resource-type" name="book-resource-type" content="Guide">
    <meta scheme="apple_ref" id="identifier" name="identifier" content="//apple_ref/doc/uid/TP40002051">
    <meta id="document-version" name="document-version" content="16.5.0">
    
    
    <meta id="xcode-display" name="xcode-display" content="render">
    <meta id="IndexTitle" name="IndexTitle" content="Safari Web Content Guide: Configuring the Viewport">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

¿Qué puedo hacer? Espero me puedan ayudar.

**Nota: Me di cuenta que este problema no tiene que ver tanto con lo responsivo, puesto que lo probé en un Motorola, un S6 Edge y un mini S6 y no aparece ese problema, para mí que es el Safari porque también aparece el problema en el Iphone 6S.

5
  • Puedes añadir una imagen del antes y el despues?
    – Hoose
    Commented el 18 ago. 2016 a las 18:26
  • Vale, solo espera un momento... Commented el 18 ago. 2016 a las 18:47
  • listo, ya las agregué :) Commented el 18 ago. 2016 a las 19:19
  • Safari es el nuevo IE ;)
    – Shaz
    Commented el 18 ago. 2016 a las 19:46
  • u_U ya me di cuenta, bueno, ahorita va la solución... Commented el 18 ago. 2016 a las 20:51

2 respuestas 2

3

Vale, esto es muy poco ortodoxo, pero logré solucionarlo utilizando JQuery al enlazar las imágenes de esta manera. Como mis botones tenían efectos, quizás eso era lo que fallaba, en este caso le dije a la instrucción lo que debía hacer cuando pasaba el ratón encima,algo bastante sencillo, el problema es que el código anterior debería jalar también, pero por increíble que parezca no hace lo que quiero en landscape, es muy probable que yo cometiera un error al ejecutar una línea, pero ni siquiera en el chrome del iPad mini me los mostraba como debería. En fin. Gracias por leerme y espero que a alguien le sirva.

 $("#Reporte").on({
        mouseenter: function() {
            $(this).children(':first-child').attr('src',"<?=URL::to('images/Reporte_fuerte_v2.png')?>");
        },
        mouseleave: function() {
            $(this).children(':first-child').attr('src',"<?=URL::to('images/Reporte_claro_v2.png')?>");
        }
    });
     $("#Bordero").on({
        mouseenter: function() {
            $(this).children(':first-child').attr('src',"<?=URL::to('images/Bordereau-obscuro.jpg')?>");
        },
        mouseleave: function() {
            $(this).children(':first-child').attr('src',"<?=URL::to('images/Bordereau-claro.jpg')?>");
        }
    });

      $("#Declaratoria").on({
        mouseenter: function() {
            $(this).children(':first-child').attr('src',"<?=URL::to('images/Declaratoria-Obscura.jpg')?>");
        },
        mouseleave: function() {
            $(this).children(':first-child').attr('src',"<?=URL::to('images/Declaratoria-claro.jpg')?>");
        }
    });

2

Antes que nada hay que tener en cuenta que hay un pequeño bug (o comportamiento diferente a los demás) al momento de usar la pseudoclase :active, debe usarse en conjunto con un handler para el evento ontouchstart.

Esto se explica en la documentación en MDN.

<body ontouchstart="">
...
</body>

Se puede reescribir y mejorar un poco el código, aquí pongo una idea de como agrupar los estilos con clases u otros selectores, para no repetir el mismo código para cada botón:

body {
  font-size: 10px; 
} 

.contenedor {
  display: flex;  
}

.contenedor input[type=button] {
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    height: 15rem;
    width: 15rem;
    opacity: .5;
    z-index: 99;
}

.button_1 {
    background-image: url(http://lorempixel.com/200/200/sports);
}

.button_2 {
    background-image: url(http://lorempixel.com/200/200/city);
}

.button_3 {
    background-image: url(http://lorempixel.com/200/200/nature);
}

.contenedor input[type=button]:hover {
  opacity: 100;
  box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button1:active {
    background: url(http://lorempixel.com/200/200/people) no-repeat bottom;
}

#button2:active {
    background: url(http://lorempixel.com/200/200/transport) no-repeat bottom;
}

#button3:active {
    background: url(http://lorempixel.com/200/200/city) no-repeat bottom;
}
<div class="contenedor">
	        <div class="elemento elemento1">
	            <a href="#">
	                <input class="button_1" id="button1" type="button" ontouchstart="" />
	            </a>
	        </div>
	        <div class="elemento elemento2">
		        <a href="#">
		            <input class="button_2" id="button2"  type="button" ontouchstart="" />
		        </a>
	        </div>
		    <div class="elemento elemento3">
		        <a href="#">
		            <input class="button_3" id="button3" type="button" ontouchstart="" />
		        </a>
		    </div>
	    </div>


Teniendo en cuenta que la solución o la idea era simplemente utilizar la pseudoclase :hover:

body {
  font-size: 10px; 
} 

.contenedor {
  display: flex;  
}

.contenedor input[type=button] {
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    height: 15rem;
    width: 15rem;
    opacity: .5;
    z-index: 99;
}

.button_1 {
    background-image: url(http://lorempixel.com/200/200/sports);
}

.button_2 {
    background-image: url(http://lorempixel.com/200/200/city);
}

.button_3 {
    background-image: url(http://lorempixel.com/200/200/nature);
}

.contenedor input[type=button]:hover {
  opacity: 100;
  box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}

#button1:hover {
    background: url(http://lorempixel.com/200/200/people) no-repeat bottom;
}

#button2:hover {
    background: url(http://lorempixel.com/200/200/transport) no-repeat bottom;
}

#button3:hover {
    background: url(http://lorempixel.com/200/200/city) no-repeat bottom;
}
        <div class="contenedor">
	        <div class="elemento elemento1">
	            <a href="#">
	                <input class="button_1" id="button1" type="button"/>
	            </a>
	        </div>
	        <div class="elemento elemento2">
		        <a href="#">
		            <input class="button_2" id="button2"  type="button"/>
		        </a>
	        </div>
		    <div class="elemento elemento3">
		        <a href="#">
		            <input class="button_3" id="button3" type="button"/>
		        </a>
		    </div>
	    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.