Hide with visibility: hidden instead of display: none

[albell]

There are a few places where the computed dimensions of non-active slides need to be known. E.g. they’re needed for recalculating the sentinel index on resize, and also for margin calculations in the center plugin.

But it’s impossible to directly get the computed dimensions of an element that is display: none, because it’s taken out of the render tree.

jQuery has a hack for getting the computed dims of display:none elements that works by swapping in display: block, and setting position: absolute, measuring the dimensions, then setting it back to display: none. The problem with this hack is that it’s unreliable in all but the simplest layout cases. For complex slides with multiple images, it simply doesn’t work. The current JQ core team attitude seems to be that the hack was a mistake, it can’t really be fixed, and the only thing to be done now is just to warn people about it in the docs:

http://bugs.jquery.com/ticket/14685

The consensus now seems to be that if you know you will need to measure an element later, hide it using visibility:hidden instead. This leaves the element in the render tree. There is probably a small rendering performance cost, but I would argue it’s probably a cost the author typically wants to incur, so that slide dimensions can be measured directly and with accuracy.

One potential issue is that visibility doesn't inherit like display:none. A visible descendant of a hidden parent will still be visible. So to complete this approach you might want to loop over all the hidden slides's descendants recursively. (That of course has potential issues too, because it assumes everything in a slide's markup is supposed to be visible when it's active.)

FWIW I’ve been using this change for several months now to deal with a tricky sizing problem from awhile back and haven’t encountered any issues. If there's a problem with this approach in some context, maybe hiding using visibility could be broken out as an option?

[malsup]

Thanks, Alex!