Ionic-framework: ionic 2 menu carré gris

Ahh bonne prise ! Je peux voir cela avec notre démarreur sidemenu sur Android 5.1.1, Android 6.0.1 et Android N dev preview 2.

Je rencontre le même problème avec Ionic 1 (version Delhi et supérieure).

+1 dans Ionic 2 bêta 7

+1 se produit également dans platform:ios lors de l'utilisation du débogueur chrome, Ionic 2 beta 7.

J'ai découvert que cela ne se produit que lorsque le contenu ne dépasse pas la taille d'écran particulière testée (lorsque vous ne pouvez pas faire défiler pour une vue particulière). J'espère que cela aidera quelqu'un à trouver la cause première.

Bonjour à tous, cela a été corrigé pour notre version beta.10. Si vous souhaitez l'essayer tôt, vous pouvez installer le dernier ionic 2 tous les soirs avec npm install ionic-angular@nightly . Il y a quelques changements mineurs dans cette version pour lesquels nous aurons des instructions de mise à niveau complètes lors de la sortie, mais le plus important est que

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

devrait être remplacé par ceci

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

Merci d'avoir utilisé Ionic !

Revoir ce problème avec la dernière nuit. Réouverture pour enquêter davantage.

Exactement le même problème.

Note pour l'équipe : J'ai fait du débogage à ce sujet et j'ai obtenu des résultats vraiment étranges. Si vous inspectez la page avec des outils de développement chrome, ce petit carré gris ne semble pas être dans le dom.

Je vois toujours le petit carré gris sur les appareils iOS et Android avec beta10

Il est également reproduit sur ionique 1.3.
Petite case grise dans une liste vide. Lorsque j'essaie de modifier n'importe quel style de contenu (dans les outils de développement chrome) - la boîte a disparu, même si j'annule mes modifications... c'est vraiment étrange...

J'ai remarqué deux choses lorsque je joue dans les outils de développement chrome, mais aucune n'aide vraiment à en trouver la cause, mais pourrait aider avec l'emplacement DOM ( ion-header ou scroll-content ou mes tests peut-être tout simplement faux !).

Tout d'abord, si vous décochez la propriété d'élément ion-header position: absolute; l'en-tête revient à position: static; qui cache l'en-tête et le carré gris derrière le ion-content comme ceci l'élément a une hauteur et une largeur de 100 %. Cela doit donc signifier que cela a quelque chose à voir avec l'élément ion-header , n'est-ce pas ?

Et deuxièmement, j'ai également remarqué que si vous augmentez la propriété margin-top:56px; à disons 100px sur l'élément scroll-content à l'intérieur du ion-content , cela fait que le carré se déplace plus bas dans le écran.

Ainsi, deux éléments différents semblent affecter le carré gris mais ne sont pas des éléments enfants ou parents, ils sont plutôt frères / adjacents l'un à l'autre. Hummm

Remarque : la modification des valeurs dans l'inspecteur de chrome entraîne la disparition du carré. Vous devez donc ouvrir et fermer à nouveau le menu pour voir où il est repositionné.

Je pense que je suis arrivé à la conclusion que c'est la barre de défilement de l'élément scroll-content !!

Sur l'élément scroll-content si vous changez overflow-y: scroll; en overflow-y:auto; il s'en débarrasse. Et aussi si vous changez overflow-x: hidden; en oveflow-x:scroll; le carré gris change légèrement en raison du chevauchement des barres de défilement verticales et horizontales :)

Je pense donc que la solution correcte (qui fonctionne pour moi) est

scroll-content{
      overflow-y: auto;
}

Je ne sais pas si cela causera la rupture de quelque chose d'autre ou non

Quelque chose d'autre qui semble faire disparaître le carré est lorsque vous faites ce qui suit

<ion-content fullscreen="true">

J'espère que ces informations seront utiles pour la mise en œuvre d'un correctif

j'ai commencé à voir cela plus souvent en beta11 qu'en beta8

Salut! Heureux d'annoncer que je ne peux plus reproduire ce problème avec le dernier nightly. Pour cette raison, je vais fermer ce sujet pour le moment. Merci d'avoir utilisé Ionic !

@ jgw96 s'il vous plaît rouvrez, le bogue est de nouveau là.

@ jgw96 Le problème s'est produit pour moi dans la page modale (.modal-wrapper). Je l'ai corrigé avec overflow-y:auto sur .scroll-content. Cela s'est produit sur un appareil Android, pas dans le chrome du bureau.

Version : 2.0.0-rc.1-201610191717 (légèrement)

@ jgw96 Je reçois également la boîte carrée dans rc1.

Obtenir également ceci dans rc1

@ jgw96 m'arrive aussi en rc1.

Dans mon cas, cela ne se produit que si j'ai des entrées et que celles-ci n'ont pas d'espace réservé ...

ion-content fullscreen="true"
réparer sur rc1

@felipeands ce n'est pas un correctif, probablement la boîte grise est là derrière la barre de navigation .... =)

Cela m'arrive aussi sur ionic 1.3.2. Un correctif peut-il également être implémenté pour ionic v1 ?

J'ai essayé la suggestion de définir
.scroll-content{ overflow-y: auto; }
Ce qui semble résoudre le problème lorsque votre contenu principal est affiché, cependant, lorsque j'ouvre le menu de gauche, il réapparaît.

Edit : il semble que le css ci-dessus corrige effectivement le problème sur ionic v1... ne tenez pas compte de ma déclaration à ce sujet apparaissant lorsque le menu est ouvert. Ma montre insolente ne fonctionnait pas pour une raison quelconque.

même problème dans rc2 aussi

@WHarris22 a raison, avec fullscreen="true" le carré gris du menu n'apparaît pas (parce qu'il est derrière la barre de navigation...)

Alos voir cela avec rc3 lorsque vous vous concentrez sur l'entrée

Pareil ici (quand j'ouvre et ferme le menu) avec rc3, la seule solution pour moi était :

1) réglez overflow , overflow-y ou overflow-x (selon la situation) sur auto

2)

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

Bonjour à tous! Est-ce que vous voyez toujours ça dans RC4 ?

Oui, il est de retour dans RC4

Je vois cela aussi dans 1.3.2 (dans un menu latéral). Le correctif scroll-content a fonctionné pour moi 👍

Je suis confronté à cela dans 2.1.0 (nouvelle installation). <ion-content fullscreen="true"> est une solution de contournement valide dans l'intervalle... Toute solution réelle concernant ce problème serait très appréciée. Merci

Cela n'arrive pas pour le menu de droite

Pour la petite histoire, Ionic 2.3.0, notre ami carré gris est toujours affiché.
Pour l'éviter, je continue à utiliser l'attribut fullScreen du contenu.

Dans ionic 1.3.3, j'ai supprimé le carré gris avec ce CSS :

teneur en ions{
débordement : automatique ;
}

::-webkit-barre de défilement, *::-webkit-barre de défilement {
affichage : aucun ;
}

comme suggéré par @aluknot

en 3.0.1 je peux toujours le voir

Cela se produit pour le menu de gauche

Je suis confronté au même problème pour un ami carré gris dans ionic 2, veuillez vérifier en joignant la capture d'écran
ion-content{ overflow: auto; } ::-webkit-scrollbar, *::-webkit-scrollbar { display: none; }
cette solution fonctionne mais elle masquera la barre de défilement tout au long du projet, c'est pourquoi ce n'est pas une aide complète pour moi

Veuillez corriger dès que possible pour un ami carré gris !!!

@ jgw96 Malheureusement, je vis aussi celui-ci. J'ai mis à jour le framework vers la dernière version.
Au début, il n'y en a pas. Cependant, après avoir ouvert et fermé le menu une fois qu'il est là. Je vois cela sur Android 7.1.2.
Voici également des informations ioniques.
forfaits globaux :

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

forfaits locaux :

@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

Système:

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

Cela se produit pour le menu de gauche

Dès que j'appuie sur l'écran de contenu principal, il apparaît. En utilisant également le cadre ioinique 3.4.2.

Le bogue est toujours là dans Ionic 3.4.0..

+1

Toujours en cours en 3.4.2 :(

Cela se passe pour moi dans 3.4.1 pour les menus de gauche et de droite. Uniquement lorsque le contenu ne nécessite pas de défilement.

C'est définitivement une partie de div.scroll-content car vous pouvez définir top: 20px !important et le regarder descendre la prochaine fois.

J'ai défini une longue liste asynchrone et elle est apparue alors que la liste n'était pas remplie, puis a disparu dès que l'appel asynchrone est revenu et que la liste a été remplie.

Cela se passe pour moi aussi dans 3.4.1 pour le menu de gauche.

Pour le moment, j'ai essayé ce qui suit et corrigé.

.scroll-content{
débordement-y : auto !important ;
}

Ça se passe aussi en 3.5.0

@ WHarris22 Je pense que son .scroll-content

cela se produit également dans la version 3.6.0 ... il apparaît après avoir rejeté le clavier, puis cliqué sur le contenu, le carré apparaît dans chaque page contenant une entrée et nécessitant l'ouverture du clavier. cela n'arrivait pas avant

Toujours en 3.12.0 :(

il est encore

cela a fonctionné pour moi
<ion-content padding fullscreen="true">

J'ai essayé ceci :
html <ion-menu class="full-width">...</ion-menu>
css .full-width { width: 50%; display: flex }

Je le remarque également dans plusieurs de mes applications ioniques, même avec la dernière version 3.7.1. Quelqu'un a-t-il déjà réussi à le résoudre ? Il se produit juste sous l'en-tête (dans la section d'ombre de l'en-tête). Je n'utilise pas de menu ou d'onglets.

Toujours là...

@brandyscarney Y a-t-il quelque chose qui empêche la résolution de ce problème ?

D'après ce que j'ai lu dans https://github.com/ionic-team/ionic/pull/10431 et https://github.com/ionic-team/ionic/issues/6022#issuecomment -228110736, le overflow-y: scroll sur scroll-content n'est là que pour rendre les utilisateurs iOS heureux avec le défilement dynamique.

Comme indiqué dans https://github.com/ionic-team/ionic/issues/6022#issuecomment -279400592, cela peut être résolu de la manière suivante :

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

Pourrait-on avoir ça en 3.7.2 ? C'est un peu ennuyeux d'avoir des correctifs comme ceux-ci dans nos feuilles de style ?

J'ai également trouvé ce bogue, dans un projet totalement indépendant (pas un projet ionique) ... et il n'apparaît en quelque sorte que lorsque j'utilise hammerjs (et uniquement sur mobile Android). Quelqu'un peut-il confirmer cela?

toujours le même problème s'il vous plaît quelqu'un m'aider à ce sujet.

info ionique

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

forfaits globaux :

cordova (Cordova CLI) : 8.0.0

forfaits locaux :

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

Système:

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

Variables d'environnement:

ANDROID_HOME : not set

Divers :

backend : legacy

Même problème 3.9.2

Résolu en utilisant -

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

comment supprimer l'objet squire une fois que vous avez cliqué sur mon bouton. Je vous remercie

@marcusaaronb C'est la propriété CSS outline . Les navigateurs ont un style par défaut ajouté. Il y a beaucoup de raisons de garder le contour, par exemple mentionné ici : Arrêtez de jouer avec le contour de focus par défaut du navigateur

En termes d'application native, si vous ne prévoyez pas de l'avoir accessible sur le Web mais uniquement à partir des magasins d'applications, vous pouvez vous en débarrasser en utilisant ce qui suit :

:focus {
    outline: none;
}

Dans ionic 4 aplha 2 ont également trouvé ce problème depuis ionic 2

Ce problème se produit toujours sur ionic 3.9.2

`
info ionique

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

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

forfaits globaux :

cordova (Cordova CLI) : 8.0.0

forfaits locaux :

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

Système:

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 d'environnement:

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

Divers :

backend : pro

`

La solution de contournement proposée par @patwaswapnil fonctionne comme un charme

.scroll-content{
débordement-y:auto !important;
}

Merci pour le problème ! Nous avons déplacé le code source et les problèmes d'Ionic 3 dans un référentiel séparé. Je déplace ce problème vers le référentiel pour Ionic 3. Veuillez suivre ce problème là-bas.

Merci d'utiliser Ionic !

Problème déplacé vers : https://github.com/ionic-team/ionic-v3/issues/88