Links aren't clickable in Firefox

[AJ Jordan]

When a Bespoke.js presentation is viewed in Firefox, and presumably all Gecko-based UAs, links aren't clickable. I have no idea why. Chrome does not have this problem.

I see nothing obvious in the console. Perhaps this is caused by a preventDefault() somewhere? I don't know.

[AJ Jordan]

For reference, I used the yo generator. Here's my main.js:

// Require Node modules in the browser thanks to Browserify: http://browserify.org
var bespoke = require('bespoke'),
  cube = require('bespoke-theme-cube'),
  keys = require('bespoke-keys'),
  touch = require('bespoke-touch'),
  bullets = require('bespoke-bullets'),
  scale = require('bespoke-scale'),
  hash = require('bespoke-hash'),
  progress = require('bespoke-progress'),
  state = require('bespoke-state');

// Bespoke.js
bespoke.from('article', [
  cube(),
  keys(),
  touch(),
  bullets('li, .bullet'),
  scale(),
  hash(),
  progress(),
  state()
]);

I can also reproduce this problem with Build Wars: Gulp vs. Grunt.

[Mark Dalgleish]

Thanks for highlighting this.

The issue is that the .bespoke-scale-parent elements are positioned absolutely and are blocking clicks on the slides.

The fix is to set pointer-events: none on these elements, and set pointer-events: auto on the active slide. For reference, see the 'Fix links in Firefox' commit from the 'Build Wars' repo.

I'll apply this fix to the generator and update the bespoke-scale readme. Since this issue isn't actually with the core library, I'm closing this issue.

[Mark Dalgleish]

This issue has been fixed in generator-bespoke, generator-bespoketheme, bespoke-theme-cube and bespoke-theme-voltaire.

[AJ Jordan]

Works for me, thanks!