Ionic-framework: cuadrado gris del menú iónico 2

Ahh buena captura! Puedo ver esto con nuestro iniciador sidemenu en Android 5.1.1, Android 6.0.1 y Android N dev preview 2.

Estoy experimentando el mismo problema con Ionic 1 (versión Delhi y superior).

+1 en Ionic 2 beta 7

+1 también ocurre en plataforma: ios cuando se usa el depurador de Chrome, Ionic 2 beta 7.

Descubrí que esto solo ocurre cuando el contenido no desborda el tamaño de pantalla particular que se está probando (cuando no puede desplazarse para una vista en particular). Espero que esto ayude a alguien a encontrar la causa raíz.

Hola a todos, esto se solucionó para nuestra versión beta.10. Si desea probarlo antes, puede instalar el último ionic 2 todas las noches con npm install ionic-angular@nightly . Hay algunos cambios de última hora muy pequeños en esta versión para los que tendremos instrucciones completas de actualización cuando lancemos, pero lo más importante es que

<ion-navbar *navbar>
</ion-navbar>

se debe cambiar a esto

<ion-header>
  <ion-navbar>
  </ion-navbar>
</ion-header>

¡Gracias por usar Ionic!

Volviendo a ver este tema con el último nightly. Reapertura para investigar más.

Exactamente el mismo problema.

Nota para el equipo: Hicimos una depuración en esto y obtuvimos algunos resultados realmente extraños. Si inspecciona la página con las herramientas de desarrollo de Chrome, ese pequeño cuadrado gris no parece estar en el dom.

Todavía veo el pequeño cuadrado gris en dispositivos ios y android con beta10

También se reproduce en iónico 1.3.
Pequeña caja gris en lista vacía. Cuando trato de cambiar cualquier estilo de contenido (en las herramientas de desarrollo de Chrome), el cuadro desaparece, incluso yo revierto mis cambios... es realmente extraño...

Me di cuenta de dos cosas cuando juego con las herramientas de desarrollo de Chrome, pero ninguna ayuda realmente a encontrar la causa, pero podría ayudar con la ubicación del DOM ( ion-header o scroll-content o mi prueba podría estar equivocado todo junto!).

En primer lugar, si desmarca la propiedad del elemento ion-header position: absolute; el encabezado vuelve a position: static; que oculta el encabezado y el cuadrado gris detrás de ion-content como este elemento es 100% alto y ancho. Entonces, esto debe significar que tiene algo que ver con el elemento ion-header , ¿verdad?

Y segundo, también noté que si aumenta la propiedad margin-top:56px; a, digamos, 100 px en el elemento scroll-content dentro de ion-content esto hace que el cuadrado se mueva más hacia abajo. pantalla.

Entonces, dos cosas diferentes parecen afectar el cuadrado gris, pero no son elementos secundarios o principales, son más hermanos / adyacentes entre sí. Hmmmm

Nota: cambiar los valores en el inspector de cromo hace que el cuadrado desaparezca, por lo que debe abrir y cerrar el menú nuevamente para ver dónde se reubica.

¡Creo que llegué a la conclusión de que es la barra de desplazamiento del elemento scroll-content !

En el elemento scroll-content , si cambia overflow-y: scroll; a overflow-y:auto; , se deshace de él. Y también si cambia overflow-x: hidden; a oveflow-x:scroll; el cuadrado gris cambia ligeramente debido a la superposición de las barras de desplazamiento vertical y horizontal :)

Entonces creo que la solución correcta (que funciona para mí) es

scroll-content{
      overflow-y: auto;
}

No estoy seguro de si esto hará que algo más se rompa o no.

Otra cosa que parece hacer desaparecer el cuadrado es cuando haces lo siguiente

<ion-content fullscreen="true">

Espero que esta información sea útil para implementar una solución.

comencé a ver esto con más frecuencia en beta11 que en beta8

¡Hola! Feliz de informar que ya no puedo reproducir este problema con el último nightly. Debido a esto, voy a cerrar este tema por ahora. ¡Gracias por usar Ionic!

@ jgw96 vuelva a abrir, el error está ahí nuevamente.

@ jgw96 El problema me ocurrió en la página modal (.modal-wrapper). Lo arreglé con overflow-y:auto en .scroll-content. Ocurrió en el dispositivo Android, no en Chrome de escritorio.

Versión: 2.0.0-rc.1-201610191717 (noche)

@ jgw96 también obtengo el cuadro cuadrado en rc1.

También obteniendo esto en rc1

@jgw96 también me pasa en rc1.

En mi caso, eso solo sucede si tengo entradas y estas no tienen marcador de posición...

pantalla completa de contenido iónico = "verdadero"
arreglarlo en rc1

@felipeands no es una solución, probablemente el cuadro gris está detrás de la barra de navegación.... =)

Esto también me está pasando en ionic 1.3.2. ¿Se puede implementar una solución para ionic v1 también?

Intenté la sugerencia de establecer
.scroll-content{ overflow-y: auto; }
Lo que parece arreglarlo cuando se muestra su contenido principal, sin embargo, cuando abro el menú del lado izquierdo, aparece nuevamente.

Editar: parece que el css anterior lo soluciona en ionic v1 ... ignore mi declaración sobre que aparece cuando se abre el menú. Mi reloj Sass no funcionaba por alguna razón.

mismo problema en rc2 también

@ WHarris22 tiene razón, con fullscreen="true" el cuadro gris del menú no aparece (porque está detrás de la barra de navegación...)

Alos viendo esto con rc3 cuando se enfoca en la entrada

Lo mismo aquí (cuando abro y cierro el menú) con rc3, las únicas soluciones para mí fueron:

1) establezca overflow , overflow-y o overflow-x (depende de la situación) en auto

2)

::-webkit-scrollbar,
*::-webkit-scrollbar {
      display: none;
}

¡Hola a todos! ¿Siguen viendo esto en RC4?

Sí, está de vuelta en RC4

Estoy viendo esto en 1.3.2 también (en un menú lateral). La solución scroll-content funcionó para mí 👍

Me enfrento a esto en 2.1.0 (instalación nueva). <ion-content fullscreen="true"> es una solución alternativa válida mientras tanto, por cierto... Cualquier solución real con respecto a este problema sería muy apreciada. Gracias

No pasa para el menú del lado derecho

Para el registro, Ionic 2.3.0, nuestro amigo cuadrado gris todavía se muestra.
Para evitarlo sigo usando el atributo fullScreen del contenido.

En ionic 1.3.3 eliminé el cuadrado gris con este css:

contenido de iones{
desbordamiento: automático;
}

::-webkit-barra de desplazamiento, *::-webkit-barra de desplazamiento {
pantalla: ninguno;
}

como lo sugiere @aluknot

en 3.0.1 todavía puedo verlo

Ocurre para el menú del lado izquierdo

estoy enfrentando el mismo problema para el amigo cuadrado gris en ionic 2, verifique adjuntar captura de pantalla
ion-content{ overflow: auto; } ::-webkit-scrollbar, *::-webkit-scrollbar { display: none; }
esta solución funciona, pero ocultará la barra de desplazamiento en todo el proyecto, por eso no es de gran ayuda para mí

¡Por favor, arregle lo antes posible para el amigo cuadrado gris!

@ jgw96 Desafortunadamente, también estoy experimentando este. Actualicé el framework a la última versión.
Al principio no está allí. Sin embargo, después de abrir y cerrar el menú una vez que está allí. Veo esto en Android 7.1.2.
También aquí hay información iónica.
paquetes globales:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.0 
Ionic CLI        : 3.4.0

paquetes locales:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.1.2 browser 4.1.0
Ionic Framework                 : ionic-angular 3.4.2

Sistema:

Node       : v7.3.0
OS         : Linux 4.10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 4.6.1

Está ocurriendo para el menú del lado izquierdo.

Tan pronto como toco la pantalla de contenido principal, aparece. Usando ioinic framework 3.4.2 también.

El error todavía está aquí en Ionic 3.4.0 ..

+1

Todavía sucede en 3.4.2 :(

Sucedió para mí en 3.4.1 para el menú del lado izquierdo y derecho. Solo cuando el contenido no requiere un desplazamiento.

Definitivamente es parte de div.scroll-content , ya que puede configurar top: 20px !important y ver cómo se mueve hacia abajo la próxima vez.

Configuré una lista asíncrona larga y apareció mientras la lista estaba despoblada y luego desapareció tan pronto como regresó la llamada asíncrona y se llenó la lista.

También me pasó a mí en 3.4.1 para el menú del lado izquierdo.

Por el momento, he intentado lo siguiente y lo he arreglado.

.scroll-contenido{
desbordamiento-y: auto !importante;
}

Está sucediendo también en 3.5.0

@ WHarris22 Creo que es .scroll-content

también está sucediendo en 3.6.0 ... aparece después de descartar el teclado y luego hacer clic en el contenido, el cuadrado aparece en cada página que tiene entrada y requiere abrir el teclado. esto no ocurría antes

Todavía en 3.12.0 :(

aún es

Esto me funciono
<ion-content padding fullscreen="true">

Intenté esto:
html <ion-menu class="full-width">...</ion-menu>
css .full-width { width: 50%; display: flex }

También estoy notando esto en muchas de mis aplicaciones iónicas, incluso con la última versión 3.7.1. ¿Alguien ha podido solucionarlo todavía? Ocurre justo debajo del encabezado (en la sección de sombra del encabezado). No estoy usando menú o pestañas.

Aún allí...

@brandyscarney ¿Hay algo que impida la resolución de este problema?

Por lo que he leído en https://github.com/ionic-team/ionic/pull/10431 y https://github.com/ionic-team/ionic/issues/6022#issuecomment -228110736, el overflow-y: scroll en scroll-content solo está ahí para hacer felices a los usuarios de ios con el impulso de desplazamiento.

Como se dijo en https://github.com/ionic-team/ionic/issues/6022#issuecomment -279400592, esto se puede solucionar de la siguiente manera:

.content .scroll-content {
    overflow-y: auto;
}
.content-ios .scroll-content {
    overflow-y: scroll;
}

¿Podríamos tener eso en 3.7.2? ¿Es un poco molesto tener arreglos como estos en nuestras hojas de estilo?

También encontré este error, en un proyecto totalmente no relacionado (no un proyecto iónico) ... y de alguna manera aparece solo cuando estoy usando hammerjs (y solo en dispositivos móviles con Android). ¿Alguien puede confirmar esto?

sigue siendo el mismo problema, por favor alguien que me ayude en esto.

información iónica

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

paquetes globales:

cordova (Cordova CLI) : 8.0.0

paquetes locales:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

Sistema:

Node : v8.9.2
npm  : 5.5.1
OS   : Windows 7

Variables de entorno:

ANDROID_HOME : not set

Varios:

backend : legacy

Mismo problema 3.9.2

Resuelto usando -

.scroll-content{
    overflow-y:auto !important;
} 

cómo eliminar el objeto escudero una vez que haga clic en mi botón. gracias

@marcusaaronb Esa es la propiedad CSS outline . Los navegadores tienen un estilo predeterminado agregado. Hay muchas razones para mantener el esquema, por ejemplo, las que se mencionan aquí: Deje de jugar con el esquema de enfoque predeterminado del navegador.

En términos de una aplicación nativa, si no planea tenerla accesible en la web sino solo desde las tiendas de aplicaciones, puede deshacerse de ella usando lo siguiente:

:focus {
    outline: none;
}

En ionic 4 aplha 2 también se ha encontrado este problema desde ionic 2

Este problema sigue ocurriendo en ionic 3.9.2

`
información iónica

paquetes cli: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

paquetes globales:

cordova (Cordova CLI) : 8.0.0

paquetes locales:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 6.4.0
Ionic Framework    : ionic-angular 3.9.2

Sistema:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2 
ios-sim           : 6.1.2 
Node              : v9.9.0
npm               : 5.7.1 
OS                : macOS High Sierra
Xcode             : Xcode 9.3.1 Build version 9E501

Variables de entorno:

ANDROID_HOME : /Users/user/Library/Android/sdk

Varios:

backend : pro

`

La solución propuesta por @patwaswapnil funciona de maravilla

.scroll-contenido{
desbordamiento-y:auto!importante;
}

¡Gracias por el problema! Hemos movido el código fuente y los problemas de Ionic 3 a un repositorio separado. Estoy moviendo este problema al repositorio de Ionic 3. Por favor, rastree este problema allí.

¡Gracias por usar Ionic!

Problema movido a: https://github.com/ionic-team/ionic-v3/issues/88