Chrome rendering bug, Slick.js, Flash animation

Question

The following display issues occurs in Chrome (Version 39.0.2171.95 dev-m) It has been observed on several Windows PCs and on a Mac.

There seems to be two culprits which can cause this, a slideshow component using Slick.js and a flash animation. I have updated Slick.js to no avail.

The content display will cut off at the same place regardless of where the component is positioned. The position appears to be fixed from the top of the page, not relative to the size of the browser.

The hidden content below will appear in blocks as you move your mouse over the area. Resizing the browsers or highlighting the text on the page will also clear it.

Display bug

Whilst the bug is still live you can view it here http://sci.esa.int

Any thoughts?

If I break slick.js by removing the js - then the Twitter component does not cause the bug. If I remove the flash or the twitter component from the page, the bug does not occur.

Can see it on `40.0.2214.93 m` win, I noticed that it disappears if you resize the window — David Fregoli, Jan 30 '15 at 12:32
A friend just tried 40.0.2214.93 (64-bit) - saw the bug, relaunched with 40.0.2214.94 and still broken.. damn — Daniel Cook, Jan 30 '15 at 12:32

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

I found a resolution

html{
    -webkit-transform: translate3d(0, 0, 0);
}

As per another comment though I have added this code

html *:not(svg) {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

Chrome redraw issue

Although another comment suggests it can have drawbacks

edited May 23 '17 at 12:14

Community

1
1

answered Jan 30 '15 at 13:41

Daniel Cook

1,033
1
9
19

Chrome rendering bug, Slick.js, Flash animation

1 Answers1