I have a gallery of images that seems to be quite 'jumpy' when opening and closing the images, as demonstrated in this fiddle.
Even after applying transform:translateZ(0); as suggested here, there doesn't seem to be much improvement in reducing the laggy animation.
Is there something I might have overlooked or done incorrectly that is causing this issue?
Note: The HTML markup repetition isn't a concern; it's more likely related to the 'imagewrap' CSS class that could be causing the problem.
$(document).ready(function () {
$('.imagewrap').click(function () {
$('.imagewrap').not(this).removeClass("active");
$(this).toggleClass("active");
});
});... (CSS code here) ...<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
... (Image gallery HTML code here) ...
</div>I suspect the issue may arise from switching between position:relative and position:absolute;, although I haven't fully tested this yet (there could be other underlying problems that I'm not aware of). But based on my observation so far, that seems to be a possible cause of the problem.