Strange behaviour cellAlign. Sometime works correctly, other times no. #1309
Description
Hi, I am new to this library and I think this is awesome.
I don't know if I miss something but I found a strange behaviour using cellAlign: left (default).
Sometimes the cell is not completely aligned on left like in img1 and img2.
If I open the Inspector, then it works correctly, even if I close it.
But if I refresh the page, it returns to render incorrectly.
I tried on different PC, browsers, even on my friend's PC.
Is this normal?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<style>
* {
box-sizing: border-box;
}
.main-carousel {
border: 1px solid red;
}
.carousel-cell {
border: 1px solid green;
height: 250px;
width: 250px;
}
</style>
</head>
<body>
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
<div class="carousel-cell" style="border:1px solid green">Elemento 1</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 2</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 3</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 4</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 5</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 6</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 7</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 8</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 9</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 10</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 11</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 12</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 13</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 14</div>
<div class="carousel-cell" style="border:1px solid green">Elemento 15</div>
</div>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
</script>
</body>
</html>