Почему из-за transform: scale(1.1) немножко дергаются другие элементы сайта?

Question

[aumarov111]

Здравствуйте, вопрос в заголовке. overflow прописаны и все равно. При наведении на картинку, например, линия в верхней части сайта, которая находится за пределами блока с продуктами, пропадает и снова появляется. Точно так же и футер, он немного приподнимается и опять опускается. Сабж.

/***
*
*	PRODUCTS STYLES
*
***/

.products {
	position: relative;
	display: block;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 2px 0.5% 15px;
    background: #e9e9e9;
}

.products .item {
	position: relative;
	display: block;
	float: left;
	width: 32.2%;
    margin: 10px 0.5666% 0;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.99);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.99);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.99);
    overflow: hidden;
}

.products .item:hover > .img-block img {
    
}

.products .item .img-block {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-bottom: 3px solid #252729;
}

.item .img-block img {
    display: block;
    width: 100%;
    zoom: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 200ms linear 0ms;
    -moz-transition: all 200ms linear 0ms;
    -ms-transition: all 200ms linear 0ms;
    -o-transition: all 200ms linear 0ms;
    transition: all 200ms linear 0ms;
}

.item .img-block img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

Answer 1

[skyfortress]

пробуй прописать такой фикс

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

Comments

[Николай Евсюков]

мне это очень помогло, кроме кнопок((( Пришлось кнопки переделывать на фикс высоту и выравнивать по вертикали line-height а не padding.

Answer 2

[Виталий Желтяков]

transform: scale плохо работает в webkit-браузерах и IE. Это баг.

Answer 3

[Алексей Кулешов]

Не используйтся функцию scale(1) для состояния элемента по-умолчанию. Трансформация срабатывает только после события :hover - потом самостоятельно возвращает всё "на круги своя, своевременна" (с).

Answer 4

[Александр N++]

вы же увеличиваете элмент картинку на 10% от нормы. + увас картинка как и сам блок 100%

Answer 5

[storaged]

Вроде бы есть решение. Трансформация меняет прорисовку элементов, которые выше находятся, по отношению к текущему.
Прочитай, возможно поможет.
habrahabr.ru/company/odnoklassniki/blog/158917