2012-02-14 16 views
11

Este problema solo ocurre en Google Chrome en Mac OS X (Chrome 17). Lo he probado en todos los principales navegadores en Mac y Windows 7.Imagen de fondo de CSS desapareciendo en Chrome

Aquí está la página en cuestión: http://dealsfortherich.com/drop/

Como se puede ver, estoy cargando divs a través de jQuery AJAX. La página siempre está bien en "Actualizar".
Puede navegar por las páginas con las flechas izquierda y derecha. El problema ocurre cuando cambias páginas; especialmente cuando cambia de página cuando se desplaza rápidamente por la página. Intenta desplazar la página hacia abajo muy rápido y presiona la flecha derecha. Las imágenes de fondo que ya se han cargado a través de CSS (por ejemplo):

.sort_block{ background: url(images/sort_block.png) no-repeat;} 

comienzan a desaparecer. Solo las imágenes de fondo que están cargadas con CSS comienzan a desaparecer. Todo está bien. Si abre Developer Tools en Chrome, inspeccione los elementos, verá que el navegador tiene la sintaxis correcta y que ya ha descargado la imagen en su caché. Por alguna razón, simplemente no lo muestra. El valor de visualización de CSS es correcto. En el Inspector, para el div con el fondo que falta, si modifica un valor como "top: 8px;" a "arriba: 9px;" la imagen aparece de repente.

Esto solo ocurre en Chrome (v. 17) y Chrome Canary (v. 19) para Mac OS X (10.7.3). ¿Debo informar este error a Google o hay algún problema conocido o solución? Creo que puedo reemplazar la s con s, pero preferiría hacerlo correctamente y solucionar este extraño problema.

Respuesta

9

No sé si este es el mismo problema, pero la raíz es probablemente la misma: http://code.google.com/p/chromium/issues/detail?id=111218. Basado en ese informe, no creo que aún haya una solución conocida.

+1

Gracias, ese error es exactamente lo que estoy experimentando, éstos sólo están sucediendo en divs que estaban ocultas. – daSong

+2

Esta solución resuelve el problema para mí: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/ – daSong

+1

Este problema se ha solucionado y se ha fusionado en dev y canales beta: http://code.google.com/p/chromium/issues/detail?id=111218#c43 A partir de hoy, parece que todavía no se ha enviado a estable, pero eso debería suceder pronto . Puede ver http://googlechromereleases.blogspot.com/, pero debería ser cuestión de días. –

3

Tuve el mismo problema y lo diagnostiqué durante horas, pero no se trata de tu código, es un error relacionado con la memoria en la última versión de Chrome. En mi experiencia, no le sucede a las imágenes pequeñas, por lo que una solución temporal sería disminuir el tamaño del archivo (por debajo de 10kB más o menos).

Tengo aquí un archivo de prueba que muestra la diferencia entre una imagen de fondo grande y una pequeña.

http://kolina.fi/chrometest.html

+0

Sí, desde que creé esta pregunta, he descubierto que hay al menos 4 tickets abiertos en code.google.com: http://code.google.com/p/chromium/issues/detail?id=111218 http://code.google.com/p/chromium/issues/detail?id=70268 http://code.google.com/p/chromium/issues/detail?id=109049 http: // code. google.com/p/chromium/issues/detail?id=113774 Parece ser una compra en el kit web en Chrome 17 para Mac. – daSong

2

se trabajó hasta una solución para este problema hasta Cromo/Cromo "fija el fallo" (hola, Milton) ...

Mi colega, Andrew, publicado nuestra solución aquí: http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

se puede ver la página en cuestión en: http://www.mavenlink.com/tour

suena como esto ha funcionado para otros también, pero es feo !

+1

O en una línea 'var fix = function ($ s) {var $ s.css (" background-image ", $ s.css (" background-image ")); } 'y luego puede usarlo como ...' fix ($ (". myselector")) ' –

-4

Uso:.. Url (.// imágenes ruta El .// debería resolver el problema

+1

Según la información proporcionada por otros usuarios, parece que esto no es una solución. ¿Has probado este código? –

1

Recientemente he tenido este problema, y ​​la solución fue usar la URL completa, en lugar de una ruta relativa

Por ej.cambie url(images/image.png)

a

url("http://yoursite.com/images/image.png")

+1

No trabajé aquí –

Cuestiones relacionadas