google chrome - Chrome muestra una página en blanco en el sitio de idioma RTL hasta que se cambia el tamaño de la ventana
google-chrome arabic (7)
El enlace a la página no funciona. ¿Está la página disponible en el sitio del futurismo?
Descargué la página futurism.com y agregué dir="rtl" lang="ar" a la etiqueta html. He vuelto a cargar la página 50 veces. No puedo reproducir el problema.
Mi copia de la página se está ejecutando en Apache con Multiviews.
- He añadido una directiva de idioma para el árabe.
- Tengo dos copias del archivo, futurism.htm.en y futurism.htm.ar
- He configurado el idioma en mi navegador en árabe [ar].
- Las páginas árabes son negociadas por apache.
La página se carga sin problema.
También he creado otra página con letras árabes Unicode. Carga y muestra el árabe de derecha a izquierda sin problemas.
Acabo de crear una versión en árabe, un sitio web y noté que Chrome a veces muestra una página totalmente en blanco hasta que la ventana cambia de tamaño y todo se vuelve visible al instante.
El árabe es un lenguaje RTL, por lo que la etiqueta <html> tiene dir="rtl" lang="ar" agregada. Esta es la única diferencia entre este y el sitio en inglés.
Este es el sitio . Es posible que tenga que hacer clic en el logotipo varias veces para verlo en blanco.
Solucioné este problema y quiero compartirlo con usted. Creo que este problema es solo para gc en Mac OS. ¿Cómo arreglarlo? Es realmente fácil. oculte su cuerpo en su css y luego muéstrelo cuando la página se cargue y todo funcionará.
/*Add this to your css to hide body */
body {
display: none;
}
<!-- Add to your html to js file to show your body again -->
$(window).load(function() {
// When the page has loaded
$("body").show()
});
También he notado este problema y busqué en Internet en inglés y en árabe, pero no pude encontrar la causa del problema. Encontré una solución para arreglarlo sin embargo; use el siguiente script de jQuery en sus páginas web dirigidas por rtl:
//Chrome RTL UI Issue Fix
$(document).ready(function(){
$(window).load(function() {
$( "body" ).animate({
scrollTop: 1
});
});
});
Todo lo que hace es que desplaza la página solo 1px justo después de que se hayan cargado todos los elementos de la página. Puede agregar un código que lo desplace hacia atrás si lo desea.
Tengo este problema con mi Wordpress y lo arreglé agregando este código javascript
window.scrollTo(0, 1);
window.scrollTo(0, 0);
Tuve un problema similar al tuyo, pero mi sitio se mostró bien hasta que se actualizó manualmente en los teléfonos Android, después de lo cual la página quedaría en blanco. Este comportamiento también podría reproducirse en herramientas de desarrollador en Chrome y Opera (ambos usan el motor Blink).
Primero, apliqué una regla de posicionamiento fija al cuerpo,
body { position: fixed; }
Luego, revertí el posicionamiento en la carga de la página usando jQuery,
jQuery(window).load(function() { jQuery(''body'').css(''position'',''static''); });
Wordpress se volvió realmente molesto al trabajar en RTL, necesita cambiar el tamaño o desplazarse para mostrar el contenido. Creo que solo está sucediendo en MacOS.
Me he dado cuenta de que algunos sitios web no tienen este problema, por lo que al comparar el html noté que los sitios web en funcionamiento tienen muchas clases en el <html> , como: js flexboxlegacy canvas canvastext webgl no-touch geolocation ... por modernizr.js (v2.8.3)
Agregué esto al encabezado de mi página y el problema de la página en blanco desapareció:
<script src="/js/modernizr.js"></script>
No estoy seguro de lo que está sucediendo, pero es posible que le proporcione algún punto de partida para descubrir la causa real del problema.
Yo tuve el mismo problema.
Simplemente no aplique dirección a las etiquetas del body o html .
<html>
<head>
<style>
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">
<!-- Your Codes Here ... -->
</div>
</body>
</html>