Sequence: wrapper always gets `z-index: 10000 - trackIndex`, so a sibling layer outside a Sequence is hidden under it

Open Beginner friendly
  • Is something wrong?
#15 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
70/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

The z-index is set in packages/rendiv/src/components/Sequence.tsx: the trackIndex = 0 default at line 32, trackZIndex at line 92, and the spread of zIndex: trackZIndex after ...style at lines 217 and 227. Reproduce with the Master snippet via rendiv still and check whether the red div shows at frame 10. Done when a sibling outside a Sequence is visible, a zIndex in the Sequence's own style is respected, and Sequences without a track index stack in DOom order. Settling the default behaviour may need a maintainer decision.

Written by the indexing model from the issue text.

Description

bug

Summary

Every <Sequence> wrapper is given z-index: 10000 - trackIndex, and trackIndex defaults to 0, so the z-index is always set. A layer that sits next to Sequences without being in one (an overlay, a watermark, a caption strip) is painted under all of them, whatever its DOM order and whatever z-index below 10000 it has. Nothing warns about it. The layer is simply missing from the frame.

Reproduction

@rendiv/core 0.2.6.

const Shot: React.FC = () => <Fill style={{ background: '#0d0d1a' }} />;

const Master: React.FC = () => (
  <Fill>
    <Sequence from={0} durationInFrames={90}>
      <Shot />
    </Sequence>
    <div style={{ position: 'absolute', left: 48, top: 40, width: 300, height: 100, zIndex: 50, background: 'red' }} />
  </Fill>
);

rendiv still src/index.tsx Master out.png --frame 10: no red box anywhere in the frame. Wrap the div in its own <Sequence from={0} durationInFrames={90}> and it appears (same z-index as the shot, later in the DOM).

The same thing happens one level down: inside a shot, a Sequence with the default layout always sits above its plain siblings.

Cause

packages/rendiv/src/components/Sequence.tsx:

  • line 32: trackIndex = 0
  • line 92: const trackZIndex = effectiveTrackIndex !== undefined ? 10000 - effectiveTrackIndex : undefined; (the undefined branch cannot be reached because of the default)
  • lines 217 and 227: zIndex: trackZIndex is spread after ...style, so a style={{ zIndex }} passed to the Sequence is overwritten as well

Suggested fix

  • Set the z-index only when a track index was actually given, by the trackIndex prop or by a Studio timeline override. With no track index there is no z-index and siblings stack in DOM order.
  • Let a zIndex in the Sequence's own style win.
  • If the current behaviour stays, document it on the Sequence page, and warn in dev when a Sequence has a positioned sibling that is not a Sequence.
Dominant language
TypeScript
Stars
159
Forks
32
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from thecodacus/rendiv

All issues in thecodacus/rendiv

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.