2011-11-01 10 views
7

Hemos tenido un problema de optimización al usar WebKit en Mac OS X y esperamos que alguien nos ayude.Posición WebKit y CSS de Mac OS X: desplazamiento fijo

Hemos escrito una aplicación Cocoa para Mac OS X que esencialmente administra un solo WebView que apunta a nuestro sitio web en línea. Todo funciona bien en su mayor parte. Sin embargo, nuestro sitio web usa la posición de CSS: arreglado para mantener una delgada "barra de encabezado" bloqueada en la parte superior del WebView, similar a la gran barra naranja de "Bienvenida" en la parte superior de StackOverflow.com. Hemos determinado que con la posición: fijo activo, el desplazamiento de WebView obliga a que toda la página web se vuelva a dibujar, lo que hace que el desplazamiento sea extremadamente lento. Con posición: fijo desactivado, el desplazamiento es muy rápido y fluido; solo se deben dibujar los elementos de página que se desplazan "a la vista".

Sabemos que esto no es un error en nuestro código de la aplicación Cocoa, ni es un problema con nuestro código HTML/CSS. El mismo desplazamiento lento se produce con el código de prueba de WebKit de Apple. Podemos señalar el código de prueba de Apple al http://www.StackOverflow.com como prueba y vemos exactamente el mismo comportamiento. También hay una página de prueba en la base de datos de fallas de Mozilla que hemos estado usando para probar el problema (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911). Lo extraño es que algunos navegadores basados ​​en WebKit en la Mac (por ejemplo, Safari y Chrome) no tienen este problema; el desplazamiento siempre es rápido en las páginas que usan la posición de CSS: corregido con esos dos navegadores.

¿Alguien más ha experimentado este problema con WebKit en OS X? Si es así, ¿qué podemos hacer para acelerar nuestro desplazamiento? Gracias.

+0

Creo que estoy experimentando esto. Eche un vistazo a http://harrisnovick.com/orange y haga clic en un mosaico de artículo. Intentaré confirmar si la posición: fija es responsable del pobre rendimiento de desplazamiento. – lightyrs

+0

Harris, veo algunos problemas de redibujado con su sitio, pero no creo que sea el mismo. Si mantengo el cursor del mouse sobre uno de los elementos de la grilla y me desplazo, el desplazamiento se vuelve un poco más lento porque todos los elementos de la grilla se vuelven a dibujar durante la operación de desplazamiento. Sin embargo, si mantengo el cursor del mouse fuera de la ventana y me desplazo, los elementos de la grilla no se redibujan. Además, la barra naranja en el lado izquierdo nunca parece volver a dibujarse. – philbert1

+0

Todo esto me hace pensar que el suyo es un problema ligeramente diferente al mío. En nuestra ventana, todos los elementos se vuelven a dibujar de forma consistente, incluida la posición: una fija. – philbert1

Respuesta

0

Podría estar muy lejos de aquí, ya que no estoy seguro de si se aplicará lo mismo en su vista web, pero usar un estilo que fuerce la navegación a su propia capa puede ayudar.

Algo así como translateZ (0), o translate3d (0,0,0,). Me he encontrado con problemas similares al construir con Phonegap y ponerme a pensar sobre las capas realmente ayudaron.

Creo que el navegador puede utilizar la aceleración de hardware donde se trata de una tercera dimensión.

0

Estaba teniendo un problema similar: la barra fija parpadeaba cuando estaba desplazando la página. Así que obligaron a la vista Web para usar capas y me fijo

[w setWantsLayer:YES]; 
0

tuve un problema similar en mi aplicación Mac basado en vista web. Tiene encabezado y pie de página con posición: propiedad de css fija. El último kit web enviado con 10.10.xy superior no sufre este problema. Sucede en webkit para inconformistas (10.9.x). Lo conseguí trabajando configurando estas propiedades para la vista web

[self.webView setWantsLayer:YES]; 
    [self.webView setCanDrawSubviewsIntoLayer:YES];