Hover Behavior

In clean canvas, in an album, if you mouse over over a photo (hover), a textured background behind the photo appears and below that background there is a context menu.

If you hover over the item coming from the top, left, or right, all is well. From there you can access the context menu at the bottom normally. But if you hover over the item coming from the bottom, the behavior of the popup differs, apparently depending on whether the photo is laid out portrait or landscape.

If it is portrait, the item does not pop up until you reach the first pixel above what will become the context menu. Then, you can access the context menu normally by mousing down again, just as if you had entered the item from the top, left, or right.

If it is landscape, the item pops up as soon as you reach the context menu, and the context menu immediately pops up. This has undesired UI behavior because if your mouse is below a photo and you go to click on it, you could end up rotating it instead, or worse. This confused my mother and almost prevented technology adoption.

I think the relevant code is in ui.init.js starting around Line 65:

        // Set the hover item's height
        $(this).height("auto");
        var context_menu = $(this).find(".g-context-menu");
        var adj_height = $(this).height() + context_menu.height();
        if ($(this).next().height() > $(this).height()) {
          $(this).height($(this).next().height());
        } else if ($(this).prev().height() > $(this).height()) {
          $(this).height($(this).prev().height());
        } else {
          $(this).height(adj_height);
        }

I'm still looking for the bug but I wanted to post this in case someone could lead me in the right direction. What's all this next and prev stuff? The defect seems to happen even in a one-photo album and comes and goes depending on the rotation.

If you change the fourth line of code above to :

        var adj_height = $(this).height();

then the context menu pops up with the photo in portrait or landscape. Confused!

Yes, it does. Approach each photo slowly from below. Happens to me on Chrome, Firefox 9.0.1, and IE9.

Also, in all three browsers, depending on where you stop to hover, the context menu might flicker for a bit or even continuously.

Unfortunately, we're seeing more and more issues with this theme and the lack of updates on it to address core code changes. I'm guessing there is a necessary deep dive going to be required to get it 'compliant' again. I use it as well, and have had to make some changes to keep up, yet I fear that things like what is posted above are going to bite me one day.

I haven't yet dug in to themeing, and think my skills are too lacking to take on this challenge. Hopefully, the author, or someone, will.

I've also noted this behavior on pages with only album thumbnails. (If that makes sense) On the pages with only albums, the hover behaves with this strange behavior as well.

In changing to the wind theme, I see on occasion if you approach from the bottom repeatedly, the height of the hover appears to change as well. Something is fishy in the sizing.

From what I can gather, it appears as if the code makes an attempt to have the hover area equal regardless of thumb height, by comparing next and prev heights against current. This isn't working.

I've edited these two lines and this seems to help, but still have issues when repeated approaching from the bottom with the height growing repeatedly....

        var adj_height = $(this).height() + context_menu.height();
        if ($(this).next().height() > $(this).height()) {
          $(this).height($(this).next().height() + context_menu.height());
        } else if ($(this).prev().height() > $(this).height()) {
          $(this).height($(this).prev().height() + context_menu.height());
        } else {
          $(this).height(adj_height);
        }

Yup, a hard-coded 25 px works for me. But there is definitely a bug somewhere in common.js because context_menu.height() is 0 for landscape photos. That would be a better fix. This fix only works because we stop using context_menu.height().

I agree it's not optimal, and yes, the value would change. I think the hover process should be more thought out. It doesn't appear you could account for the differences. I'm adding some bogus entries into the options menu to see how the hard coded value affects it's operation. I'll see what I can dig up, but I won't even pretend to be a JS or CSS novice.