Почему при использовании input range + transform scale дёргается изображение?

Question

[turbomen24]

Написал скрипт, который при нажатии на лупу с плюсом, увеличивает изображение. При нажатии на лупу с минусом, уменьшает изображение. Происходит это так:

$(function() {
	 $('#zoom-plus').click(function () {
	 var $mywidth = $('.images').width();
	 var $ratio = 1.1;	
	 var $newwidth = ($mywidth * $ratio) + 'px';
		$('.images').css("width", $newwidth)
    });
	$('#zoom-minus').click(function () {
	 var $mywidth = $('.images').width();
	 var $ratio = 0.9;	
	 var $newwidth = ($mywidth * $ratio) + 'px';
		$('.images').css("width", $newwidth)
    });	
});

Это работает, но если изображение становится больше окна браузера или самого родительского элемента, оно, естественно, позиционируется слева, и его часть уходит за правый край. Необходимо, чтобы изображение всегда центрировалось посередине.

------------

UPD Задачу решил, высчитывая нынешнюю ширину блока и прибавляя отрицательный марджин, который равен половине от разницы в ширине нового размера изображения и родительского элемента.

Вот что получилось:

$(function() {
		$('#zoom-plus').click(function () {
		var $mywidth = $('.images').width();
		var $ratio = 40;
		var $newwidth = ($mywidth + $ratio) + 'px';
		var $parent = $('.lite-box').width();
		var $margin = '-' + (($mywidth + $ratio - $parent) / 2) + 'px';
		if ($mywidth < $parent) { 
		$('.images').css("width", $newwidth)
		}
		else if ($mywidth == $parent) {
		$('.images').css("width", $newwidth);
		$('.images').css("margin-left", $margin)
		}
		else if ($mywidth > $parent) {	
		$('.images').css("width", $newwidth);	 
		$('.images').css("margin-left", $margin)
		} else { alert('33') };
    });		
	$('#zoom-minus').click(function () {		
		var $mywidth = $('.images').width();
		var $ratio = 40;
		var $newwidth = ($mywidth - $ratio) + 'px';
		var $parent = $('.lite-box').width();
		var $margin = '-' + (($mywidth - $ratio - $parent) / 2) + 'px';
		if ($mywidth > $parent) { 
		$('.images').css("width", $newwidth);
		$('.images').css("margin-left", $margin)
		}
		else if ($mywidth <= $parent) {
		$('.images').css("width", $newwidth);
		$('.images').css("margin", "0 auto")
		}
		else {}
    });	
});

---

UPD II

Удобнее получается использовать transform: scale, но есть проблема: при добавлении transition, изображение начинает дёргаться, если медленно перемещать ползунок. Посмотрите сами:

https://codepen.io/turbomen24/pen/XWKJvNM

Почему так происходит?

Comments

[Одиночка Айс]

Используйте fancybox

[Danny Arty]

у картинки установлено w и h на 100% в css и оно растягивается на всю ширину своего родителя

А каким образом оно может быть больше размеров родителя?

[turbomen24]

Danny Arty,
Да в общем-то легко, у блока установлено overflow hidden, например.

В моём случае разметка такая:

<div class="lite-box">
	<label id="zoom-plus">Zoom Plus</label>
	<label id="zoom-minus">Zoom Minus</label>
        <div class="images">
		*вывод картинок*
        </div>	
</div>

И CSS:

.lite-box {	
margin: 0px 10%;
max-height: 130vh;	
overflow-y: auto;	
overflow-x: hidden;
}

.images {
margin: 0 auto;
width: 100%;

.images img {
width: 100%;	
height: 100%;	
display: block;		
margin: auto;	
}

Саму задачу решил, теперь по по клику на зум изображение увеличивается и уменьшается, оставаясь всегда посередине родителя, при этом может увеличиться до любых размеров.

Answer 1

[Sashqa]

Используйте trasnform: scale()

Comments

[turbomen24]

Да, я уже это пробую. Есть проблема, которая заключается в следующем: при добавлении transition, изображение дёргается при масштабировании. Вот пример:

https://codepen.io/turbomen24/pen/XWKJvNM

Пробовал добавлять префиксы для transition , и так же backface-visibility hidden, ещё overflow hidden, в соответствии с рекомендациями, которые нашёл. Узнал, что действительно существует баг при использовании transition + scale в некоторых браузерах (или был такой баг в прошлом). В любом случае, если попробовать медленно передвигать ползунок , изменяя масштаб, изображение начинает дёргаться.
Интересно, почему так происходит?