Chrome - Slides disappearing and strange artifacts with >= 10 slides

[vjeux]

Hello,

I'm working on a HTML presentation with DeckJS and I'm facing an issue with Chrome

http://vjeux.github.com/jsCollaborativePresentation/#title-slide

Chrome 13.0.782.215 m

• If you refresh the page on a slide. The particular slide will be blank after reload.
• Also, if you refresh on the first slide and move forward. After the slide 10 they stop appearing correctly, there are many artifacts.

Chrome 15.0.865.0 canary

• If you refresh the page on a slide. If you move around, you will see that many slides appear on the page, displaced ...

However it works perfectly fine on Firefox, therefore I don't know if it's a bug you can fix.

Those strange artifacts appear to happen when I put more than 10 slides. It does not seem to be a markup problem as they work perfectly when the slides are alone.

[imakewebthings]

Hi vjeux, I see two different slides with the same ID, memoization-2. See if that is the culprit.

[vjeux]

I just removed all the ids. Does not seem to be the issue

http://vjeux.github.com/jsCollaborativePresentation/#slide-0

Thanks for looking at the bug :)

[imakewebthings]

Long story short, the body element was changing scroll offsets. Setting them to 0 on deck initialization seems to fix the problem in 15.0.586.0. Can you update deck.core to match master and tell me if anything is still broken?

[vjeux]

It does not solve the problem. I still have artifacts like that: http://i.imgur.com/GAVSS.png

Also, sometimes I have the blue background, and if I reload the page some times later it works ok.

I've tried on my other computer and it works perfectly. However it doesn't have a graphical card that supports webgl, maybe it's an issue with my GPU.

[vjeux]

Ok, I've added --disable-accelerated-compositing in the chrome loading options and it's working perfectly.

Given that it works almost perfectly on the Canary build, I believe that it's going to be fixed just by waiting. You should probably give a hint to your users if they see artifacts like those.

[imakewebthings]

I've seen this blue background thing in another report that was submitted to me via email. They were running Windows 7 (64-bit)(german)(Build: 7601: Servie Pack1). Do you mind sharing what your Windows build is? And possibly details on your graphics card and CPU. If you'd rather share these things by email that's fine.

I use translate3d for Webkit to trigger hardware acceleration during transitions, and this seems like something buggy in Win Chrome related to that. If you look in the horizontal and vertical transition theme CSS files you'll see them. I'm curious if changing -webkit-transform:translate3d(x,y,0) to -webkit-transform:translate(x,y) has any effect. I don't have a Win 7 machine to reproduce and test at the moment, sorry. It looks ok in XP + OSX. Nothing in the code should require WebGL support, so no worries about that.

[vjeux]

I've got a MacBook Pro (the generation before the Unibody).

• Core 2 Duo T7700 2.40Ghz
• Nvidia Geforce 8600M GT
• Windows 7 SP1 with Bootcamp

Let me try the translate instead of translate3D

[imakewebthings]

Ah perfect, your way of disabling hardware accel is much quicker than mine ;) Thanks for helping nail this down and giving me an answer for others. I'll put a warning in the README for anyone that runs into this.

[vjeux]

I've tried replacing translate3d by translate but it does not fix nor the blue background, nor the artefacts.

[imakewebthings]

Ok @vjeux thanks for trying. I'm going to close this for now. Will reopen if things change but it looks like something we'll need to wait for the Chrome team to fix. If it's easy enough to do I'll see if I can file the bug in the chromium project and get some answers.

[vjeux]

Oops sorry, there was a translate3d left in core.css. So yeah if you replace all the translate3d by translate, all the bugs will disappear: both artifacts and blue screen.

The blue background only appears during transitions. If you remove -webkit-transition: -webkit-transform 500ms ease-in-out; in horizontal-slides.css, then you won't see any blue screen anymore (but no more transitions)

[imakewebthings]

Yep, makes sense. They aren't transformed until they move. I believe I found an open bug report on the issue: http://code.google.com/p/chromium/issues/detail?id=91518 I'll add the information we uncovered to their thread later tonight. Thanks again.