Mon arrière-plan fixe faites défiler la site très lent, ce que je peux faire pour l'améliorer?

J'ai changé le fond de mon forum de discussion en utilisant le CSS ci-dessous

http://forum.antinovaordemmundial.com

html {
    background: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed;
    background-position-x: 50%;
    background-position-y: 50%;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

L'image est 1600x711 et 88k. Le défilement des pages sont maintenant très lent. Est le CSS problématique ou l'image doit être plus petite en quelque sorte?

Edit: j'ai essayé de changer:

body {        
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
    background-attachment: fixed;
    background-clip: initial;
    background-color: #51010E;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-origin: initial;
    background-position: initial initial;
    background-repeat: initial initial;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

Mais il est encore très lent sur le défilement.

Je suis en utilisant google chrome, mais j'ai essayé aussi avec firefox.
pas de ralentir ou de lag pour moi (Chrome 13)
Je suis certain retard dans Chrome 13, et son causant beaucoup de l'utilisation de l'UC lors du défilement. Le problème disparaître si vous supprimez l'image de fond?
+1 pour l'utilisation élevée du PROCESSEUR en Chrome 13--c'est de manger 100% de l'un de mes cœurs lors du défilement
Aussi, à partir d'une conception de point de vue, il semble que cela pourrait être une mauvaise idée d'avoir un redimensionnement de fond lorsque la largeur du contenu reste le même. Il ressemble au votre, en essayant de rendre le milieu de la zone de préchauffage blanc à l'aide de l'arrière-plan. qui ne fonctionne pas correctement à moins qu'ils taille dynamiquement à l'unisson.

OriginalL'auteur Emerson | 2011-08-11

8

Le problème disparaît pour moi quand j'enlève le background-size de la propriété. Je pense que c'était la mise à l'échelle de la grande image qui a été à l'origine du problème. Si cela ne fonctionne pas, il suffit de supprimer l'image de fond tout à fait. Cependant, je n'ai jamais entendu parler d'une grande image de fond causer de retard avant.

Le background-size propriété est certainement un impact, mais le site semble encore à faire défiler lentement avec elle désactiver. Je dirais que c'est une amélioration de 100%, mais il reste un problème.
Si vous supprimez l'image entièrement?
Retrait de l'image, apparaît complètement résoudre le problème, quel que soit le background-size être activé ou désactivé. Cependant, il ne semble pas faire beaucoup pour l'OP de la question 😉
J'ai enlevé l'image tout à fait, bien que j'avais préféré le garder. Je vais le tester sans l'arrière-plan de la taille de la propriété.
Ce n'est pas une solution. "La suppression de votre code et il va fonctionner", à venir sur.

OriginalL'auteur John Stimac
12

J'ai eu le même problème et résolu à l'aide de ce plugin jQuery :
http://srobbin.com/jquery-plugins/jquery-backstretch/

Il ne pas utiliser toute la propriété CSS3 mais il fonctionne très bien et n'ont pas de problème de performances sur Chrome 13 ou Firefox 6.

Résolu mon problème.
Yep, pas aimé le blocage de mon rendu de la page avec le css et le fond. +1 et merci!
fatigué de jQuery déjà

OriginalL'auteur kossdav
9

J'ai pensé que je voudrais juste contribuer ici. Plutôt que d'utiliser background-attachment: fixed; utilisation :avant et la position: fixed; problème de tri. J'ai rencontré ce même problème.

Lire la suite ici: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

Génial solution. pas de jquery, juste pur css3!
Cela ne fonctionne pas avec plusieurs éléments à l'aide de background-attachment
C'est le premier résultat Google pour moi maintenant et il a parfaitement fonctionné. Ce doit être la accepté de répondre.
Trouvé cette solution. J'ai une formation par section, ce qui donne à chaque transparent peu de son propre arrière-plan fixe que vous faites défiler à l'. Malheureusement cette astuce ne fonctionne pas dans ce cas.

OriginalL'auteur user2810762
0

Aussi, le style de la html tag améliore le taux de trame de manière significative dans les navigateurs WebKit, Chrome inclus:
```
-webkit-transform: translate3d(0,0,0);
```
Cela fonctionne dans tous les cas avec (grand) photos de fond et agitée de défilement pour autant que je peux dire.

OriginalL'auteur TNF
0

Compression de l'image (réduction de la taille), a résolu mon problème, je recommande fortement d'utiliser un outil comme Radical Image Optimization Tool (RIOT), très efficace et facile.

Sur linux, ce qui peut être fait à l'aide de GIMP , vous pouvez également supprimer l'image de métadonnées afin de réduire la taille, l'utilisation de l'outil comme exiftool.

OriginalL'auteur ExillustX
0

La question est en fait avec le background-attachment valeur fixe si vous changer de background-attachment: scroll pour des appareils mobiles, il devrait corriger le décalage.

OriginalL'auteur WPExplorer

Vous devez vous connecter pour publier un commentaire.