Bonjour,
Je rencontre un problème sur mon site au moment de l'affichage des pages filtrées : les transitions sont saccadées sous chrome et safari alors que tout est fluide avec firefox. Je n'arrive pas à comprendre d'où cela peut venir.

Voici mon Html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html> 
<html lang="fr"> 
 
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
    <title>Accueil</title> 
    <meta name="description" content="" /> 
 
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="lightbox.css">
 
    <link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
 
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 
</head> 
 
<body id="accueil">
 
<header>
    <section class="container">
        <div id="logo">
            <img src="img/logo.png">
        </div>
        <nav>
            <ul id="filtre">
                <li class="active"><a href="#" data-filtre="*">All</a></li>
                <li><a href="#" data-filtre=".diary">Diary</a></li>
                <li><a href="#" data-filtre=".lith">Lith</a></li>
                <li><a href="#" data-filtre=".color">Color</a></li>
            </ul>
        </nav>
    </section>
    </header>
 
 
	<section id="folio">
 
        <div class="projet diary">            
            <a href="img/image-1.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-1.jpg"></a>
        </div>
 
        <div class="projet diary">
            <a href="img/image-2.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-2.jpg"></a>
        </div>
 
        <div class="projet diary">
            <a href="img/image-3.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-3.jpg"></a>
        </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="js/lightbox.js"></script>
    <script src="js/isotope.js"></script>
    <script src="js/site.js"></script>
 
</body>
</html>

Une partie du CSS:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* ---- ISOTOPE CLASSES ANIMATION ---- */
 
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
 
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
 
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}
/*BODY*/
 
#folio {width: 980px; position: relative; margin: 50px auto;}
#folio:after {content: ''; display: block; width: 0px; height: 0px; clear: both;}
 
.projet {width: 225px; background: #fff; float: left; margin: 10px; overflow: hidden; transition: all 0.3s;}
.projet:hover {border: 1px solid #fff; box-shadow: 0 0 10px #777;}
.projet img {width: 100%;}

La partie Jquery:

Code jquery : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
 
$(function() {
 
 
    // Isotope projets folio
 
    $('#folio').isotope({
 
        itemSelector: '.projet',
        layoutMode: 'masonry',
        filter:'*',
            animationOptions: {
                duration:500,
                easing:'linear',
                queue:false
            }
 
    });
 
    // Filtre projets
 
 
    $('#filtre li a').click(function(){
 
    $('#filtre li').removeClass('active');
    $(this).parent().addClass('active');
 
    filtre = $(this).attr('data-filtre');
 
    $('#folio').isotope({ 
        itemSelector: '.projet',
        layoutMode: 'masonry',
        filter:filtre,
            animationOptions: {
                duration:500,
                easing:'linear',
                queue:false
            } 
    });
 
    return false;
 
    });
 
    // LIGHTBOX
 
    $('#folio a').lightBox();
 
});

Je vous remercie pour votre aide,