Avisos
Vaciar todo

[Resuelto] Fallo visualizacion en dispositivos móviles  

Página 1 / 2
 
Jordi
 Jordi
Usuario eminente

Buenas tardes,

 

Estoy haciendo una página 'OnePage Web': www.metrofort.com. Parecía que todo iba bien hasta que hemos comprobado la pagina en un dispositivo móvil (en este caso, android) 

Se puede observar al hacer un scroll lento de la pagina, como hay unos efectos tipo 'flash' que son molestos a la visualización, como si saliera por pocos instantes una imagen. El efecto pasa cuando hay alguna función scroll sea un sticky o cualquier otro, en una imagen.

Buena parte de la pagina, he tenido que duplicar las secciones para configuararlas para vista en formato desktop o movil, deshabilitando en buena parte de las secciones de solo visible en movil, los efectos scroll, ya que en pantalla de PC se ve perfectamente, sea en formato completo o en fromato movil. Pero no con un dispositivo Android.

He probado de todo. Habilitando, deshabilitando secciones, pero no soy capaz de encontrar lo que provoca este efecto. Para que la vista movil sea un poco funcional, como he dicho, estoy duplicando las secciones activando solo la visualizacion para estos dispositivos, sin aplicar los efectos scroll.

Tenemos otra web alojada (www.novascan3d.com) y aun repitiendo los mismos efectos en metrofort pasa y en Novascan3D, esto no sucede.

Que podria ser? Puede que la duplicación de configuraciones (desktop, tablet y movil) dentro del mismo modulo, pueda ocasionarlo?

Esta mañana hice una instalacion limpia de WP y Divi y siguen los mismos problemas.

Ya me dicen.

Gracias,

Contenido solo visible a usuarios registrados

Respondido : 05/06/2021 2:54 pm
Jordi
 Jordi
Usuario eminente

Me olvidé... En el formulario de contacto, si pones el nombre y despues haces click en un 'He leido y acepto...' te desplaza la pagina 2 o 3 secciones más arriba, sin que haya una relación entre estas, es decir, no están linkadas. Y todo viene de lo mismo

Respondido : 05/06/2021 2:58 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Jordi,

Pude revisar tu sitio y te recomendaría revisar algunas cosas

-Como explicas si hay un efecto de flash pero solo pude recrearlo en mi movil android y curiosamente solo me sucede con la img de la firma, revisa el efecto de transición o entrada que estas utilizando, puedes prescindir de el
-El efecto de las las letras typewriting algunos párrafos pasan las dos líneas en mobile, esto puede causar también el efecto de que se mueva el ancho total del sitio
-Con respecto al formulario, veo que el label de "He leído y acepto la política de privacidad" esta enlazado a un ancla #politica_privacidad sin embargo quedamos en el mismo sitio, primero la pagina de las políticas debería ser una interna o popup, segundo hay una discrepancia entre las anclas, verifica si la que utilizas no se repite en mobile que es donde solo se ve este comportamiento y por ultimo solo en casos aislados se utiliza un URL con un ancla con target="_blank" aun cuando esa seccion con ese ID no existe.

De resto no pude ver errores de javascript, nos comentas como te va

Saludos

Respondido : 05/06/2021 3:24 pm
Jordi
 Jordi
Usuario eminente

@bruno-vichetti Gracias por la respuesta

Efectivamente, todavia no tengo los links internos (anclas) del todo creadas. No sabia si continuar o debería modificar parte de la pagina. Revisaré los efectos de las imagenes.

En el formulario de contacto, una vez puesto el nombre, por ejemplo, si aceptas un 'leido y acepto.. ' (no el link de la politica) me lleva dos o 3 secciones más arriba, sin que haya ningún motivo de ello. No estan linkados, eso es un modulo formulario, totalmente independiente a la sección donde va. Diria que se desplaza a la sección de las imagenes navales ya que hay el primer fecto scroll de 3 imagenes sobrepuestas de la página, que por otro lado me es imprescindible mantener para que genere el efecto que busco en esa sección. Volvemos a estar en la problematica de los efectos en versión movil... 

Pero repito que funciona todo correctamente en versión escritorio. No en un dispositivo móvil, que es lo curioso.

En todo caso, termino de configurar la pagina y anclas. Voy a deshabilitar todas los efectos, sean de scroll o animación y los iré activando, hasta que de con la tecla.

 

Aprovecho para consultar. He puesto un menu deslizable a la derecha. Tengo un par de submenus, pero no se despliegan. Algún consejo? 

 

Gracias!!

Respondido : 05/06/2021 5:42 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Jordi,

Perfecto, respecto a los efectos como te comentaba solo pude apreciarlo en la imagen a la que hice referencia, de resto todo se ve sin inconvenientes

Respecto al ancla en tu formulario como mencione antes es posible que tu elemento en mobile tenga un ID estipulada que entre en conflicto con la ID colocada en una URL en la parte de las politicas, por ello es posible que lo tome como un ancla al darle clic en mobile.

He puesto un menu deslizable a la derecha. Tengo un par de submenus, pero no se despliegan. Algún consejo? 

Pude verlo pero al parecer no tiene submenus agregados solo se ve las opciones principales, puedes validar de que si hay submenus agregados? utilizas algun complemento para crear dicho menu?

Quedamos atentos a tus comentarios, Saludos

Respondido : 05/06/2021 5:56 pm
Jordi
 Jordi
Usuario eminente

@bruno-vichetti

Adjunto captura de como tengo montado el menu.

Es el estándar de Divi, configurado en apariencia de WP. No tengo CSS ni plugin que modifique nada.

 

SharedScreenshot
Respondido : 05/06/2021 6:14 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Jordi,

Gracias por la captura, pude validar y el problema es que cuando colocas una opción con submenus esa opción principal no debería tener una URL.

Realiza la siguiente prueba, retira las URLs de las opciones del menu principales (Metrofort y NovaScan3D) y podrás validar de que se despliegan las demas opciones.

Saludos!

Respondido : 05/06/2021 6:33 pm
Jordi
 Jordi
Usuario eminente

@bruno-vichetti

Menu solucionado! Muchas gracias

Sigo corrigiendo la version movil de la pagina deshabilitando todos los efectos y os voy informando.

Por cierto he actualizado el PHP a 7.4 y no ha cambiado nada sobre la visualización. (Webempresa por defecto deja la 7.3)

Aconsejas instalar el PHP 8? Podria solucionar temas de visualización?

Respondido : 05/06/2021 7:12 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Jordi,

Excelente! Mantengo el tema abierto para dar seguimiento a tus otros comentarios, nos avisas cuando podamos darlos por listos

Respecto a la actualización del PHP lo recomendable es utilizar las versiones estables convencionales (7.3 y 7..4) ya que algunos complementos puede que entren en conflicto con la version 8

Saludos

Respondido : 05/06/2021 7:32 pm
Jordi
 Jordi
Usuario eminente

@bruno-vichetti

He estado haciendo pruebas. He creado una pagina 'Test' www.metrofort.com/test/ para ir probando diferente tipo de imagenes, etc.. 

He bajado la resolución, tamaño... He creado los modulos de imagen de nuevo... Y sigo igual. Cuando la imagen pasa por la pantalla del dispositivo movil, hace un tipo de 'flash' que es muy molesto. Si se hacen pequeños scrolls (como si se quisiera lanzar hacia arriba o hacia abajo la pagina, no manteniendo el dedo en pantalla), el efecto se agrava mucho mas. No se por donde puede venir el problema. En la otra web que tenemos, no nos ocurrió y se hizo de igual forma. Si deshabilito tadas las imagenes, no tengo el efecto, por muchas animaciones  o efectos scroll del texto, pueda tener.

He probado también de trabajar el tamaño de las imágenes de distinta forma: con %, con vw/vh, con px.... siempre lo hace.

No se si tengo algo mal configurado, es un error de wp, de Divi o lo que es. Pero en pantalla de escritorio se ve bien y en movil (en este caso android), hace este efecto.

A ver si podemos encontrar la solucion.

Gracias,

Respondido : 06/06/2021 12:34 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Jordi, 

Puedes enviarnos una demostración sobre este efecto que nos comentas?, he estado realizando pruebas, pero no puedo replicarlo. He realizado la prueba en un iPhone dentro del navegador chrome, te adjunto una captura de lo que veo

Puedes probar eliminar cualquier transición que tengas en las imágenes y textos para la versión móvil y ver si con ello no se muestra, también puedes verificar si hay algún plugin que esté ocasionando el conflicto en las animaciones, para ello puedes probar desactivar todos los plugins y dejar solo los requeridos por tu tema luego de ello verifica si al hacerlo las animaciones se ven de forma correcta en móvil, si es así ve activando uno por uno hasta determinar cuál causa el conflicto

Un Saludo 

Respondido : 06/06/2021 1:27 am
Jordi
 Jordi
Usuario eminente

Buenos dias

Adjunto un poco de video del efecto en un dispositivo móvil android

Se puede ver que después de cada movimiento, hay una especie de 'flash' o zoom de la imagen que dura pocos instantes, pero cada vez que se hace scroll y hay una imgen, pasa esto. Aquí deshabilite casi todos los efectos de transición...

Al ser una pagina One Page Web, puede ser que haya demasiada información?. La edición de la pagina me iba muy lenta al final

Respondido : 06/06/2021 8:43 am
Jordi
 Jordi
Usuario eminente

Buenas

Creo que he avanzado en mi búsqueda. En nuestro WPFacil tenemos 2 webs alojadas. Una es metrofort.com dónde tengo los problemas y la otra es novascan3d.com

En las 2, he subido la misma hoja *.json para ver el comportamiento. Sin tocar nada, con la misma configuración y en novascan3d se ve bien, en metrofort no.

Podéis seguir los siguientes enlaces, con la página test (decir que estas estan a medio terminar, pero las 2 igual. No hagáis mucho caso de como está configurado el contenido)

Se ve bien:  www.novascan3d.com/test

Con los problemas anteriomente comentados: www.metrofort.com/test2

Puede ser el tipo de letra? Es que poco más se me ocurre a que no haya una mala instalacion de Divi, pero la he instalado 2 veces ya...

 

Quedo a la espera.

Gracias,

Respondido : 06/06/2021 12:43 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Jordi,

Vale he podido ver que ya has probado varias cosas y el error persiste en metrofort, por casualidad tienes en uso algún código personalizado? en definitiva sabemos que el error es en el sitio actual ya que en los demás no sucede, evalúa también que plugins tienes activos.

Con respecto a la fuente, estas utilizando un tipo de letra personalizado? como lo agregaste?

Nos comentas para revisar mejor tu caso

Saludos

Respondido : 06/06/2021 2:23 pm
Jordi
 Jordi
Usuario eminente

@bruno-vichetti

Buenas tardes Bruno

Solo tengo el plugin Supreme lite de Divi por el efecto typing, pero puedo deshabilitarlo. Código poco, solo para poner unas lineas laterales en los titulos de seccion y para el pie de pagina (copiado de la web que funciona corectamente).

La fuente utilizada es de ggogle fonts, instalada ya en Divi 

He copiado la misma configuración de WP y Divi de la que finciona correctamente y sigue igual. La unica diferencia que en estos memomento tengo, es la versión de divi.

Donde se ve correctamente tengo la 4.9.2 y en la de metrofort (donde tengo los problemas) la 4.9.4. Se puede bajar de versión de alguna forma que no sea por el rollback? No me deja, me dice que la 4.9.4  no tiene versión anterior para hacer rollback.

 

Respondido : 06/06/2021 3:35 pm
Página 1 / 2