Site qui saccade sur Chrome et Safari

[Jules_Bresard]

Hello à tous,

j’ai un problème avec le site d’un client : quand on scroll la page sur Google Chrome ou Safari, elle saccade légèrement, ce qui provoque comme des petits flashs.
Voici le site : http://matieresetcouleurs.ch/
et voici le résultat qu’il aimerait avoir : http://www.dcube.swiss/

Pour tester il faut scroller tout doucement. Quand on se concentre sur les espaces blancs entre les images on voit bien que sur le deuxième site c’est très fluide alors que sur le premier ça saccade.

Pour information, le site est un wordpress et j’ai crée avec le plugin Visual Composer.
Pour essayer de régler le problème, j’ai déjà diminué la taille de toutes les images, j’ai installé un plugin de caches et compressé les fichiers HTML et CSS. Je ne sais pas quoi faire de plus.
Le problème est uniquement sur Chrome et Safari. Quand je teste la page sur Firefox, il n’y a pas de problème.

Avez-vous une idée ?

Merci d’avance pour votre aide !

J.

[Delapouite]

Salut.

Sur matieresetcouleurs.ch, il y a cet eventListener sur le ‘wheel’ qu’il faut retirer.

function wheel(event) {
    if (!initDone) {
      init();
    }
    var target = event.target;
    var overflowing = overflowingAncestor(target);
    if (!overflowing || event.defaultPrevented || isNodeName(activeElement, "embed") || (isNodeName(target, "embed") && /\.pdf/i.test(target.src))) {
      return true;
    }
    var deltaX = event.wheelDeltaX || 0;
    var deltaY = event.wheelDeltaY || 0;
    if (!deltaX && !deltaY) {
      deltaY = event.wheelDelta || 0;
    }
    if (!options.touchpadSupport && isTouchpad(deltaY)) {
      return true;
    }
    if (Math.abs(deltaX) > 1.2) {
      deltaX *= options.stepSize / 120;
    }
    if (Math.abs(deltaY) > 1.2) {
      deltaY *= options.stepSize / 120;
    }
    scrollArray(overflowing, -deltaX, -deltaY);
    event.preventDefault();
  }

[Jules_Bresard]

Merci ! Je vais essayer ça