Scaling leaves links not accessible in Firefox

[medikoo]

See e.g. http://medikoo.com/asynchronous-javascript-interfaces/?notes
It uses bespoke-scale, links are clickable on Google Chrome, but are not on Firefox (they're prefectly accessible when bespoke-scale is not used).

[mojavelinux]

Try adding the following CSS rule:

.bespoke-active {
  z-index: 1
}

Currently, the active slide is not on top, so it's not receiving pointer events properly.

Once I made this change, the links started working, but the focal point was still off slightly. That's probably some sort of bug in Firefox.

[mojavelinux]

Upon further research, I realize that the problem isn't with Firefox, but rather with the "transform" option. When a wrapper is placed around each slide, the stacking order is such that the wrapper around the last slide covers the active slide, preventing it from getting focus. What we need is for a CSS class to be added to the wrapper of the current slide when it is active so that we can move it up in the stacking order. This will affect other suck plugins, such as bespoke-theme-cube.

[mojavelinux]

I think I found a solution. The trick is to set the visibility on the wrapper element to hidden, the set the visibility back to visible on the slide elements.

.bespoke-scale-parent {
  visibility: hidden;
}

.bespoke-slide {
  visibility: visible;
}

I tried to play with z-index values, but the only way that can work is if we can set the z-index of the wrapper around the current slide different from the z-index of the wrapper around subsequent slides.

Even in my tests outside of bespoke, when you wrap each element, then stack them, you can't get the child element of the current wrapper to layer above the wrappers that follow in the document only using z-index. The behavior seems very specific (and non-intuitive).

Setting the visibility definitely works, though.

[mojavelinux]

I want to point out that you also need to disable pointer events on inactive slides.

.bespoke-inactive {
  pointer-events: none;
}

If the bespoke-scale-active class could be added to the wrapper element, then we'd also be able to use the pointer-event trick there as well (instead of the visibility trick). Something like:

.bespoke-scale-parent {
  pointer-events: none;
}

.bespoke-scale-parent.bespoke-scale-active {
  pointer-events: auto;
}

However, there's currently know what to know which wrapper element wraps the active slide.

[mojavelinux]

I'll also mention that #4 resolves this problem in a different way by only using a single wrapper element, getting us out of this business of having absolutely positioned wrapper elements sitting on top of the current slide.

[mojavelinux]

I'd almost say that it would be nice if pointer-events was set on the active slide (and any wrapper around it) explicitly by bespoke...maybe a worthwhile plugin (bespoke-pointer). It seems a bit fragile to depend on the theme to get this right. We could also consider making it part of the bespoke-classes. I'm not quite sure what the right answer is yet.

[mojavelinux]

I figured out another, perhaps cleaner way, to handle the focus (thanks to Mark's presentations).

The key is to disable pointer events from the presentation parent element, then only reenable them on the active element. Controlling the pointer events seems to have the same effect as turning off the visibility.

.bespoke-parent {
  pointer-events: none;
}

.bespoke-active {
  pointer-events: auto;
}

The pointer-events property will be inherited by all slide wrapper elements and therefore will not steal the focus of the mouse.

I can verify that with this change applied, the links in the presentation referenced by the first post in this thread are active.

[mojavelinux]

I've discovered one downside of using pointer-events: none on the parent element. If you have a plugin that requires the parent element to scroll (e.g, an overview plugin), then you won't be able to scroll in Chrome (or IE, apparently) because the scrollbar won't receive any events. In that case, the visibility trick is a slighly a cleaner solution.

[mojavelinux]

Here's the final solution I came up with which seems to work quite well.

.bespoke-parent > *:not(.bespoke-slide) {
  pointer-events: none;
}

.bespoke-active {
  pointer-events: auto;
}

The first rule catches all wrapper elements around the slides (since the property inherits).