background-size: la couverture n'est pas alignée verticalement uniquement sur le bureau Safari

J'ai une image d'arrière-plan sur le corps de ma page qui doit être centrée verticalement et horizontalement et couvrant la toile. Dans Chrome/Firefox et tous les navigateurs mobiles, l'image est centrée à la fois verticalement et horizontalement et recouvre la zone de travail. Dans Safari sur le bureau, l'image est légèrement en dessous du centre vertical. Est-ce que je fais quelque chose de mal ou est-ce que cela pourrait être un bug de navigateur?background-size: la couverture n'est pas alignée verticalement uniquement sur le bureau Safari

L'URL en direct de ceci est: http://moonios.com

J'ai essayé d'enlever le trop-plein: aucun, ainsi que la suppression des autres contenus de la page, mais le problème persiste.

Si vous avez des conseils ou pouvez confirmer ce bug, je l'apprécierais. Je vous remercie! Charlie

Mise à jour: Est-ce qu'un peu plus de travail dans la détermination de cela. Construit cette nouvelle page avec une grille: http://whyamicrazytoday.com/safari/

Le contenu de la page entière sont:

<html> 
    <head> 
    <title>Safari Background Size Bug</title> 
    <style> 
     body { 
     background-image: url(background.png); 
     background-repeat: no-repeat; 
     background-position: center center; 
     background-attachment: fixed; 
     background-size: cover; 
     } 
    </style> 
    </head> 
    <body> 
    </body> 
</html>

reproduit encore que dans Safari.

Puis je me suis souvenu de l'effet de translucidité dans la barre de navigation de Safari (bien que je l'ai désactivé). Je crois que Safari considère la zone du corps pour couvrir cette barre de navigation supérieure qui rejette mon centrage vertical puisque le contenu de la page n'est pas considéré de cette façon. Y at-il un moyen de désactiver cet effet de la dom?

Source

2015-08-11 Charlie Deets

Après avoir essayé de faire un piratage de navigateur et de cibler Safari avec des CSS spéciaux pour résoudre ce problème, j'ai vérifié dans El Capitan et ce comportement a été corrigé. Je vais donc abandonner ce problème.

Source

2015-08-11 21:31:44

Essayez-le avec seulement ces propriétés;

background-image: url(background_phone_2.jpg); 
background-repeat:no-repeat; 
background-position: center center; 
background-attachment: fixed;

Cela devrait fonctionner.

Si non, pourquoi ne pas faire un div avec l'image et utiliser z-index pour faire l'arrière-plan? Ce serait beaucoup plus facile à centrer qu'une image de fond sur le corps.

Autre que essayer:

background-position: 0 100px;/*use a pixel value that will center it*/ Ou je pense que vous pouvez utiliser 50% si vous avez défini votre corps min-height à 100%.

body{ 

    background-repeat:no-repeat; 
    background-position: center center; 
    background-image:url(background_phone_2.jpg); 
    color:#FFF; 
    font-family:Arial, Helvetica, sans-serif; 
    min-height:100%; 
}

J'espère que cela a aidé.

Source

2015-08-11 06:00:56

Merci, j'ai tout donné, mais il semble que ce soit un problème de Safari avec la translucidité. Consultez ma mise à jour dans le message principal. –

background-size: la couverture n'est pas alignée verticalement uniquement sur le bureau Safari

Répondre

Questions connexes