28111 sujets

CSS et mise en forme, CSS3

Position fixed safari

Bonjour,
La position fixed ne marche pas sur safari tel que : 
background: url(exemple) no-repeat fixed;
        background-size: 200%;
        background-position: center top;

J'aimerais que le background prenne la largeur de la div, mais pas la hauteur.
Background-size cover marche sur la version grand écran de mon site iconic-i-clash.com, mais zoom énormément sur la tête du model sur la version mobile.
Je sais que position: fixed; marche très bien sur safari mais quand je le met, dans #banniere_image, les 2 divs se mettent en position sticky en dessous des autres élément de la page.
Voici mes codes css :
#banniere_image
{
    margin-top: 30px;
    height: 250px;
    background: url(/telecharger.php?fichier=foreach.jpg&dossier=1) fixed no-repeat;
    background-size: cover;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    -webkit-max-width: 90%;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
}

Merci de votre aide !
Modérateur
Bonjour,

Louis_9876 a écrit :
La position fixed ne marche pas sur safari tel que : 
background: url(exemple) no-repeat fixed;
        background-size: 200%;
        background-position: center top;

J'aimerais que le background prenne la largeur de la div, mais pas la hauteur.
Background-size cover marche sur la version grand écran de mon site iconic-i-clash.com, mais zoom énormément sur la tête du model sur la version mobile.

Je n'arrive pas à reproduire ce que tu décris.

Louis_9876 a écrit :
Je sais que position: fixed; marche très bien sur safari mais quand je le met, dans #banniere_image, les 2 divs se mettent en position sticky en dessous des autres élément de la page.

Pareil que le point précédent : je n'arrive pas à reproduire ce que tu décris.

Tu as changé quelque chose ?

Amicalement,
En gros, quand je met 
    #banniere_image
    {
        width: 90%;
        margin-top: 3%;
        height: 180px;
        position: fixed;
        margin-bottom: 4%;
    }
pour la version mobile, ça donne ce que l'on voit.
Je ne peux pas envoyer de vidéo dsl ni de photo car elles sont trop grosse.
Modifié par Louis_9876 (28 Feb 2021 - 19:52)
Bonjour,

Enfaite, je voudrais le résultat de ma page sur chrome ou firefox, sur safari, donc il faut que #banniere_image soit fixed. Or background-attachment fixed ne marche pas sur safari mais marche sur les autres navigateurs.

Est-ce que j'ai été plus claire ?
Modérateur
Salut,

background-attachement: fixed; à bien l'air d'être fonctionnel sur Safari :
https://caniuse.com/background-attachment

Attention cependant ca background-attachement: fixed; et background-size: cover; va faire en sorte que ton image prenne la totalité de ta fenêtre. Ton image étant en paysage, sur un format en portrait elle sera donc très zoomée.

De plus en format mobile ( < 480px) ton image (ta bannière) disparait totalement pour moi...

Bonne journée
Modérateur
Bonjour,

1) background-attachement: fixed; fonctionne avec safari sur mac, mais pas avec safari sur ios effectivement.

2) je ne ferais rien de spécial si ce n'est veiller à ce que la position initiale du background permette de voir une partie de la photo acceptable avec un safari sur ios.

- avec les navigateurs qui connaissent background-attachement: fixed;, ça fonctionnera comme tu l'attends lors d'un scroll.

- avec les navigateurs qui ne connaissent pas background-attachement: fixed;, on verra toujours la même partie de la photo lors d'un scroll. C'est un fonctionnement dégradé très acceptable.

3) on peut cibler uniquement safari sur ios en css (pour par exemple positionner la photo de manière appropriée) avec des instructions du genre :

@supports (-webkit-touch-callout: none) {
  /* mettre ici du css spécifique pour safari sur ios */
}


4) Il existe des combines pour faire comme si background-attachement: fixed; fonctionnait, en particulier à base de javascript. Je te déconseille de te lancer là-dedans. Attends plutôt tranquillement que background-attachement: fixed; soit supporté par safari pour ios (c'est n'est pas demain la veille, vu qu'ils ont fait exprès que ça ne puisse pas marcher pour des questions de performance, mais un jour peut-être, ils finiront par implémenter cette fonctionnalité).

Amicalement,
Modifié par parsimonhi (01 Mar 2021 - 13:35)
Meilleure solution
Salut,
Merci beaucoup pour ta réponse, c'est ce que je viens de voir sur le forum américain d'apple. Je vais faire ce que tu m'as dit et laisser Alsacréations tranquille !

Bonne fin de journée
Sujet clos
Aller à