Stacked Parallax Bug - Chrome

[bearded-avenger]

The latest releases of Chromium seems to have re-introduced the bug where images with a fixed background position that are within an absolutely positioned div are not getting painted out all the way on scroll. There's quite a few hacks out there to fix but none have worked for me yet.

[artjomsimon]

We discovered some weird Chrome bugs where opening a gallery image full-screen (via Swipebox) wouldn't show if your scroll position wasn't exactly 0 (at the top). Strangely, this bug only appeared in combination with a homebrewn hack where we implanted a HTML5 video at the top as a "featured background" (http://storytelling.swp.de/universum-center/) In our case, this behaviour was solved in a newer Swipebox release, so updating the Swipebox JS to v1.3.0.1 (and their LESS file) solved this issue for us.

Don't know if that's exactly the issue you had (do you have a link to chrome's issue tracker?), but if it can be tracked down to another component, their upstream could already have a workaround.

[bearded-avenger]

I looked into this yesterday and actually can't replicate it locally. I think this is now something in one of our themes that's doing this.

ref chrome bug http://stackoverflow.com/a/20297373 or https://code.google.com/p/chromium/issues/detail?id=425016 or http://stackoverflow.com/questions/20268962/fixed-attachment-background-image-flicker-disappear-in-chrome-when-coupled-with

[simplemama]

Issue happens in (Chrome only; FF is ok):

Kerouac: http://www.screencast.com/t/xwznnwYkYccy Jorgen: http://www.screencast.com/t/hrkB85cvrpe Novella: http://www.screencast.com/t/w81og2vY5D

Andersen is okay! Genji is okay!

I have a post with all gallery types in one (with Novella active) at http://aesop.simplemama.com/gallery-tests/

[Fab1en]

I can reproduce the issue here (only on chrome, Firefox is fine). I use a Jorgen child theme.

It's difficult to reproduce, as it seems to be linked to the number of elements (galleries and videos) displayed on the page. Sometimes, the pictures are just flickering when scrolling. Sometimes, the whole picture is missing. The bug behavior depends on the page content, but when it s present on a particular page, it's always there.

@bearded-avenger : could you try to reproduce the bug with several galleries, each with several images (like 4 or 5 galleries with 5 images each) ? The bugs tends to appear only on the 3rd or fourth gallery.

[bearded-avenger]

It's definitely something with our themes. It doesn't happen with WooThemes Canvas for example.

[Fab1en]

OK, great to know that the issue has boundaries. Did you find what exactly in the themes triggers this behavior ?

[bearded-avenger]

Yeah so when the quote component is used with the parallax option set to on, the transform was causing the issues. So setting a hacky translate to 0 on the quote fixes it entirely. This fix will be out in 1.4 on Wednesday.

[peiche]

I've noticed this, both in the basic theme you've got in Github and in my own theme. It seems to behave fine in IE and Firefox, though. Is this confirmed to be a Chrome bug? On Sat Dec 13 2014 at 9:33:21 AM Nick Haskins notifications@github.com wrote:

Yeah so when the quote component is used with the parallax option set to on, the transform was causing the issues. So setting a hacky translate to 0 on the quote fixes it entirely. This fix will be out in 1.4 on Wednesday.

— Reply to this email directly or view it on GitHub https://github.com/bearded-avenger/aesop-core/issues/158#issuecomment-66879979 .

[bearded-avenger]

Paul this bug has been fixed.

[Fab1en]

@peiche : this is definitely a Chrome bug (see links at the end of this message), but that is triggered under some conditions. It seams that bearded-avenger fix will remove the but triggering in the context of Aesop Story Engine themes.

More info here :

• https://github.com/arnaudbreton/background-fixed-chrome-rendering-issue
• http://stackoverflow.com/questions/23571578/chrome-issue-with-background-attachment-fixed-and-position-fixed-elements
  • https://remysharp.com/2013/06/07/insights-into-rendering-performance

[bearded-avenger]

the bug has been fixed already note the commit ref above