Canvas: Label overlapping a Button blocks clicks

Support
1

Describe your issue here:

Canvas: Label overlapping a Button blocks clicks even with pointer-events: none in Custom Styles

What I’m trying to do: I have a setlist grid of song buttons (each a native Button element, OSC command /setlist/jumpToSong "SONG NAME"). I want the currently-playing song’s name to flash/blink, so I added a separate Label element positioned directly on top of each Button, with:

${osc("/setlist/activeSongName") === "SONG NAME" && osc("/global/isPlaying") ? "yellow" : "violet"}

as its Dynamic Text Color, plus a CSS keyframe animation in Custom Styles that flashes the text when the color is yellow. This part works correctly — the label text flashes exactly as intended when that song is playing.

The problem: With the Label sitting on top, the Button underneath is no longer clickable — presses don’t register at all. I tried making the Label (and its overlay) click-through using:

.overlay.z-50 {
  pointer-events: none !important;
}

.element-label, .element-label * {
  pointer-events: none !important;
}

Using the browser inspector, I confirmed via the Computed tab that pointer-events: none !important is genuinely being applied and winning on every relevant element, including the specific .label.bold text div that the click was landing on. Despite that, clicks still don’t pass through to the Button underneath — tested outside the editor, in the actual live/performance view, not just inside the Canvas builder.

My guess: since the DOM shows moveable-control-box / data-able-draggable elements and “Event” listeners attached fairly high up the tree, I suspect click/touch handling for these elements may be driven by JS-level event listeners (or a drag library’s own hit-testing) rather than the browser’s native pointer-events system — which would explain why a CSS-only fix can’t get the click through no matter how it’s applied.

What I’d like to know:

  1. Is there a supported way to make a Label (or any element) click-through to whatever’s beneath it on Canvas?

  2. Alternatively, is there a supported way to add dynamic/flashing text directly to a Button’s own Label field (rather than needing a separate overlapping Label element)?

  3. There’s also a related report here: ‘Visibility Conditions Also Hides Interaction’ — hidden elements still blocking clicks to elements beneath them. That sounds like the same underlying issue: elements intercepting clicks regardless of their visible/CSS state, rather than something specific to pointer-events

Happy to share screenshots of the inspector output showing the applied CSS if useful.

Please fill out these values to make it easier to troubleshoot:

  • OS and Version: macOS Ventura 13.6.6
  • Version of AbleSet: 3.1.4
  • Version of Ableton Live: 12.1.5