css - horizontal - -webkit-linear-gradient provoca el agrupamiento en Chrome/Safari
gradient css radial generator (6)
El título lo dice todo. La primera imagen a continuación es una captura de pantalla cuando la página completa tiene aproximadamente 8000 píxeles de alto, tomada en la última versión de Chrome:
mientras que esta imagen es para una página diferente (usando el mismo CSS) que tiene aproximadamente 800 píxeles de altura:
Y aquí está el código:
body{
background-color: #f3ffff;
margin:0px;
background-image: url(''/media/flourish.png''),
-webkit-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url(''/media/flourish.png''),
-moz-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url(''/media/flourish.png''),
-o-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=''#63ADF1'', endColorstr=''#00000000'')";
}
El degradado está diseñado para cortar a 250 px de la parte superior de la página. El hecho de que el grado de bandas parece depender de la altura total de la página es muy extraño: las páginas de alturas entre estas dos (800px y 8000px) parecen tener bandas que son más pequeñas que el primer ejemplo pero aún son notables.
Curiosamente, anteriormente estaba usando -webkit-gradient(''linear''...) lugar y eso no tenía el mismo problema; Solo -webkit-linear-gradient a -webkit-linear-gradient para que se -webkit-linear-gradient con mis -moz y -o gradientes.
No lo he probado en Safari, pero el código anterior hace que funcione perfectamente bien en Firefox y en el tipo de trabajo en Opera (los colores se arruinan, pero el gradiente sigue siendo suave). No importa IE, que he abandonado en.
Alguien mas ha visto esto antes?
Actualización: Esto también sucede en Chrome / Safari de mi Mac, pero las bandas tienen aproximadamente un tercio del tamaño de las bandas que se muestran en la imagen superior, exactamente en la misma página. Las bandas son idénticas tanto en OSX Chrome como en OSX Safari.
1/3 el tamaño sigue siendo notable, pero no tan discordante. La página actual está en http://www.techcreation.sg/page/web/Intro%20to%20XTags/ , si desea verlo por sí mismo en otro navegador. El CSS es "inline" css compilado en el navegador usando less.js.
¿Ha intentado configurar background-size: auto, 250px 250px; - auto para la primera imagen y 250px para tu gradiente.
Cuando no necesita una imagen de degradado tan grande que cubra toda la página, es mejor limitar su tamaño. Además de presentar problemas con imágenes grandes, creo que es mejor para el rendimiento del navegador.
Entonces, su ejemplo se vería como http://jsfiddle.net/kizu/phPSb/ (codificado a ciegas, aunque no se pudo reproducir el problema).
Parece que Chrome tiene algunos errores al usar los valores rgba (). Lo intenté con valores hexadecimales normales y parece que me soluciona el problema.
Mira here si lo arregla para ti también.
Editar
Parece que el problema está en el límite de 250 px porque solo aparece cuando se establece.
No logré encontrar una mejor solución que esta .
Superponiendo un div con el gradiente que te gusta, 250px de altura. Entonces puedes tener la página tan alta como quieras porque la división siempre tendrá 250px de altura.
Parece un error de webkit. Se me ocurrió la siguiente solución, probada en los últimos Chrome y FF. En resumen, colocará un div que contenga el fondo detrás de su contenido principal. También agregué algunos estilos para hacer más feliz a IE.
Dado este HTML:
<html lang="en">
<head>
<style>
...
</style>
</head>
<body>
<div class="background">bgdiv</div>
<div class="content_pane">
<div class="titlebar">Leave a Comment!</div>
<div class="comment">Your Comment.</div>
</div>
</body>
</html>
Combinado con esta hoja de estilo:
body{
background-color: #f3ffff;
min-height: 100%;
margin:0px;
}
.background {
height: 250px;
left: 0;
position: absolute; /* could use fixed if you like. */
right: 0;
top: 0;
z-index: -10;
background-image:
-webkit-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-moz-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-o-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-ms-linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#63adf1'', endColorstr=''#0000ffff'',GradientType=0 ); /* IE6-9 */
background-image:
linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* W3C */
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
}
.content_pane {
background: white;
border: 1px dotted white;
border: 1px solid grey;
font-family: arial, sans;
font-weight: bold;
margin: 6em auto 5em;
width: 50%;
}
.titlebar {
background: #3f7cdb;
color: white;
font-family: arial, sans;
padding: .25em 2ex .25em;
}
.comment {
padding: 1em;
}
Debe salir con este aspecto, independientemente del tamaño de la ventana:
Su enlace de demostración no funciona, pero hice algunas pruebas y funcionó bien para usar Chrome cuando agrega un ancho / alto del 100% a los elementos del cuerpo / html, así:
body, html {
width:100%;
height:100%;
}
Puedes intentarlo o simplemente declarar un encabezado / pieza de logotipo donde puedes agregar el gradiente inicial y simplemente agregar el gradiente final al cuerpo de tu css para que se mezcle correctamente, así:
CSS
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
body {
background-color: #f3ffff;
margin:0px;
height:10000px;
}
.header {
height:300px;
width:100%;
background-image: url(''http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png''),
-webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));
background-image: url(''http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png''),
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: url(''http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png''),
-moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
);
background-image: url(''http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png''),
-o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
background-size:auto;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=''#63ADF1'', endColorstr=''#00000000'')";
}
HTML
<div class="header">
content
</div>
Nota amistosa: para cualquiera que busque el problema, puede verlo en Chrome: http://jsfiddle.net/skJGG/
Webkit render -webkit-gradient(''linear''...) y webkit-linear-gradient de la misma manera. El problema es con tus múltiples fondos. Tuve el mismo problema y terminé con dos elementos diferentes uno encima del otro y luego describí los antecedentes de cada uno de ellos. Algo como:
<body>
<div class="body-overlay"<div>
</body>
CSS
body{-webkit-linear-gradient(...)}
.body-overlay{background:url(''blah.png'')}
Creo que esto sucede porque la imagen tiene una cantidad fija de píxeles.
en lugar de usar la imagen de fondo, intente usar esto (fondo) -
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */
y también usar valores hexadecimales siempre. Pero desde una perspectiva de UX, sería mejor usarlo como imagen (ya que de todos modos está cargando una imagen) y no tendrá que preocuparse por la compatibilidad entre navegadores.