Skip to content

Add class to scale parent of active slide #10

Description

@mojavelinux

Adding a CSS transform to an element creates a new stacking group for z-index values (see http://philipwalton.com/articles/what-no-one-told-you-about-z-index/). As a consequence, when the scale transform is added to the scale parent element, the stacking order of slides can no longer be controlled using existing CSS classes. This affects plugins that need to control the stacking order of slides such as bespoke-overview.

The scale plugin should respond to the activate event and add a CSS class to the scale parent element that corresponds to the current active slide. That way, a z-index can be assigned to the parent element to force the current slide to the top of the visible stack.

I propose the name of the CSS class to be bespoke-scale-active, though I'm open to other ideas.

Example:

<article class="bespoke-parent">
  <div class="bespoke-scale-parent" style="transform: scale(...)">
    <section class="bespoke-slide bespoke-inactive ...">
      <h1>Slide 1</h1>
    </section>
  </div>
  <div class="bespoke-scale-parent bespoke-scale-active" style="transform: scale(...)">
    <section class="bespoke-slide bespoke-active">
      <h2>Slide 2</h2>
    </section>
  </div>
</article>

I'm unsure if we should also do the bespoke-scale-inactive or the bespoke-scale-before/after classes, but we at least need to know which one of the scale parent elements corresponds to the active slide.

Note that this only applies when the transform strategy is used.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions