malsup/cycle2 — pull request #419 by baloneysandwiches (2014-01-25 01:16:29+00:00)
Title: Hide with visibility: hidden instead of display: none

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?