Elements not rendering

[esteluk]

I love the library, you've done some really awesome work here.

However, I'm having a hard-to-reproduce issue with a presentation where a large number of the elements on screen stop rendering; possibly in order from the top (the first to go is invariably the background gradient).

This happens:
i) Only when the window size is above a certain point (I can resize the window to have the elements reappear)
ii) Only if there are a certain number of elements in the document (I can hide steps until everything else starts appearing)
iii) Only if there are a certain number of elements in the window (my first step is scaled to show everything on the window, but the background redraws once I navigate to another step and only a small proportion of the elements are onscreen).
iv) But the browser can definitely cope with rendering this number of elements: if I zoom out (in the browser) from one of those subsequent steps to put all the elements back in view, they render just fine.

I've made substantial use of SVG elements. So there's that.

I've reproduced with Chrome 18.0.1025.11 and 19.0.1042.0 across two Windows machines, but also had it working fine on a third machine and also on a Mac in Chrome + Safari. It also renders fine in Firefox.

I'm unsure if this is a webkit-windows bug or something with impress.js? Has anyone else encountered this? I did think there might be a canvas element limit, but that doesn't make sense if I can zoom out and see all of the elements.

I'll try to demonstrate a test case, but I need to anonymise my document first.

[bartaz]

Hard to say anything without live example to test with.

Sometimes I've seen similar problems (with disappearing elements) on nightly builds of Chromium, so I think it's probably a browser bug. CSS 3D transforms are still quite fresh functionality, so they may behave (and break) in unexpected ways.

[dramalho]

Ah , here I though I was alone :)

Yes, seeing the same thing, I have a somewhat large presentation and I started losing stuff. I do a particular "overview" of a few slides (slide as in the ones you have on impress-demo.css) as if it were a matrix and with each new sub-element, pieces of the "matrix" started to go away.

Browser breakdown:

• Chromium 17.0.963.56 on Linux - I have missing tiles, normal gradient background
• Chrome 19.0.1041.0 on Linux - Missing tiles (but not the same back-to-front pattern) and the background is white, almost as if an element was covering the background (but there isn't one :) )
• Firefox 10.0.2 on Linux - Everything is apparently fine, but it's so slow it's embarrassing :)
• Safari (5 I think) on Mac/windows - perfectly ok

The mind boggles, but either way, I know it's bleeding edge stuff , yada yada :) . Would you want the code to debug, or is this mostly a sit-down-and-wait thing?

either way, impress.js is impressive :) , thank you for that

[bartaz]

I've had it on Linux, too.
So it seems to be Chromium Linux issue. May even be hardware related.

[esteluk]

It's definitely not a Linux only issue. I've seen it on Windows and Mac builds of Chrome.

[mschaaf]

See this bug report http://code.google.com/p/chromium/issues/detail?id=110457 Maybe it is the same problem you have.

[dramalho]

Just switched over to Windows :

• Chrome 19.0.1041.0 dev-m is slightly better than on Linux, at least it shows all the elements, but sometimes it will go all white on transitions
• Safari 5.1.2 is, however, running flawlessly

god damn it :)

[kattrawlins]

I think @bartaz and @mschaaf are right. It's a documented Chromium bug with 3D transforms. I'm seeing it with:

18.0.997.0 (Developer Build 116462 Linux) Built on Ubuntu 11.10, running on LinuxMint 12

[bartaz]

Ok, thanks for confirmation that it's a browser bug.

CSS 3D are still an experimental feature, so such things will happen.
I did my best to make it work as good as possible, and can't do anything to 'fix' this issue.