Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

šŸ› BUG: Avatar stack on post card renders above the sticky header when scrolling

Closed Beginner friendly
  • Is something wrong?
#2,163 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

A pull request for this has already been merged.

  • #7011 by @idoshamun ā€” merged

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css, javascript
Domain
frontend, web-dev

Research direction

Start by locating the feed post card, its stacked avatar styles, and the sticky top bar styles; the issue does not name specific files or tests. Reproduce the overlap on the logged-out desktop feed in a four-column grid, then inspect how stacking contexts and z-index interact. Done when the avatar stack scrolls beneath the sticky bar with the rest of its card.

Written by the indexing model from the issue text.

Description

Type: Bug
What went wrong? šŸ¤”

Description
When scrolling the feed, the first avatar of a post card's avatar stack stays visible on top of the sticky top bar ("Sign in to personalize your feedā€¦") instead of scrolling underneath it like the rest of the card.

Steps to reproduce

  1. Open the feed logged out on desktop (4-column grid).
  2. Scroll until the top of a card with a stacked avatar (source + author) passes under the sticky top bar.

Expected
The whole card, avatars included, goes under the sticky header.

Actual
The first item of the avatar stack is drawn over the header. Its first avatar overlaps the banner next to Log in / Sign up. The second avatar of the same stack is correctly hidden, and so are the avatars of the other cards in the row.

Likely cause (not verified)
The stack items probably use z-index to order the overlap. The card doesn't seem to create its own stacking context, so that z-index competes with the sticky header's at page level. Adding isolation: isolate on the stack container (or on the card) contain it (tried with devtool).

Environment

  • Browser / version: Chrome Version 155.0.8059.85 (Build officiel) (arm64)
  • OS: MacOS Tahoe 26.6.2 (25G83)
  • Viewport: width=device-width,initial-scale=1.0
  • Logged out

Screenshot
Image

Expected Behavior

The whole card, avatars included, goes under the sticky header.

Steps to Reproduce Issue
1. Open the feed logged out on desktop (4-column grid).
2. Scroll until the top of a card with a stacked avatar (source + author) passes under the sticky top bar.
Solution Proposed

The stack items probably use z-index to order the overlap. The card doesn't seem to create its own stacking context, so that z-index competes with the sticky header's at page level. Adding isolation: isolate on the stack container (or on the card) contain it (tried with devtool).

Screenshots

https://github.com/user-attachments/assets/57a79b5d-21c8-4c3e-a9c5-cbdd4d8be05e

Environment

MacOS Tahoe 26.6.2 (25G83), Chrome Version 155.0.8059.85 (Build officiel) (arm64)

Browsers

Chrome

OS

Mac

Version of daily.dev

3.47.11

Additional Context
Code of Conduct
  • I follow the conditions of this project.
Dominant language
JavaScript
Stars
20.1k
Forks
571
Avg merge
1d 3h
Merged PRs (30d)
6

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 dailydotdev/daily

All issues in dailydotdev/daily

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.