Comment "masquer" du contenu hors écran sur l'iPhone ?

Question

Je suis en train de construire une application web réactive dont la partie mobile/maigre cache différents panneaux hors écran. J'ai constaté que le positionnement de ces éléments sur le côté droit, c'est-à-dire left: 100% 'hides' ne cache pas l'élément correctement car safari mobile l'affiche toujours même s'il est positionné en dehors de la zone html y body domaines.

Je veux faire glisser ces éléments cachés en ajoutant cette classe : .focused (à l'aide d'un événement de clic jQuery), ce qui modifie la valeur de l'élément left à la valeur 0 . La classe se voit appliquer une transformation CSS qui gère également l'animation.

Lors de mes tests, j'ai constaté que le positionnement des panneaux cachés sur le côté gauche fonctionnait correctement.

Quelqu'un peut-il proposer une meilleure solution que celle que j'ai ? J'ai vraiment besoin que le contenu caché soit positionné sur le côté droit.

Voici quelques feuilles de style CSS pour vous montrer ce qui se passe :

#hidden-item {
  position: absolute;
  top: 50px;
  left: 100%;
  width: 100%;

  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

#hidden-item.focused {
  left: 0;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

Answer 1

Je sais que cet article est assez ancien, mais j'ai récemment rencontré le même problème. J'ai utilisé la balise viewport meta data pour résoudre ce problème, en utilisant une largeur fixe. L'application d'une largeur fixe et d'un overflow-x : hidden au body avec une media query dans le CSS peut également aider.

<meta name="viewport" content="width=960; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;">

J'espère que cela aidera quelqu'un.

Answer 2

Vous y êtes presque, à ce qu'il semble. Vous devez vous assurer que l'élément parent de #hidden-item a une largeur définie et une position:fixe ou absolue.

Jetez un coup d'œil à ce jsfiddle en modifiant légèrement votre css : http://jsfiddle.net/HNrCD/2/