Bx Slider makes other elements on the page moving (on Chrome)

Question

I found bug on 2 websites: as said in the title, when a slide is running, some elements further in the page are moving at the same time. Check this page:

http://www.cosmosupplylab.com/

Scrolling down on the page to the Team part, some portraits are moving at the same time the slider is fired. It happens too on the Expertise part, and other places on the page (some pictures, just one word in a paragraph, some div's ...)

It's a really strange behaviour, if you have an idea about what could be the reason, thanks a lot!

score 14 · Answer 1 · answered Oct 09 '13 at 12:46

14

I had the same behaviour in Google Chrome and fixed it by adding the following to my CSS.

.bx-viewport {
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

answered Oct 09 '13 at 12:46

derhansen

5,585
1
19
29

1

This fix worked for me - this answer should be accepted. – Darin Wilson Feb 03 '14 at 09:19
It also work for all css animation on a relative element that make other text elements under it to move. – Lliw Apr 04 '14 at 07:32

Domz · Answer 2 · 2013-07-10T10:16:52.480

0

I don't know the reason but I just encountered that same problem.

I noticed that all affected elements are positioned "relative" so I tried to change them. I tried absolute, it fixed the problem but conflicted with my design.

I solved it by making all affected elements position: static.

*Affected floating elements still move, I suggest to make them absolute if they are single floated element. :D

edited Jul 10 '13 at 10:16

answered Jul 10 '13 at 10:02

Domz

3
4

score 0 · Answer 3 · answered Sep 23 '13 at 08:05

I have a 'solution' for anyone else who has this problem.

The jumping elements is a result of the browser using CSS animations.

For a quick way to stop this behavior, set the the 'useCSS' option to false.

I'm not happy suggesting this as I would much prefer CSS animations - but it does work.

Bx Slider makes other elements on the page moving (on Chrome)

3 Answers3