Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[🐛 in esl-carousel]: CLS degradation for looped carousels with default renderer #2879

Closed
ala-n opened this issue Jan 23, 2025 · 0 comments · Fixed by #2880
Closed

[🐛 in esl-carousel]: CLS degradation for looped carousels with default renderer #2879

ala-n opened this issue Jan 23, 2025 · 0 comments · Fixed by #2880
Assignees
@ala-n
Labels
bug Something isn't working
Milestone
⚡ESL: 5.0.* Bugfi...

Comments

@ala-n
Copy link
Collaborator

ala-n commented Jan 23, 2025

To Reproduce
Steps to reproduce the behavior:

  1. Create a page with a carousel component. Use loop mode, more than 2 slides, and default renderer.
  2. Use heavy-weighted slides, e.g. background video (esl-media).
  3. Check performance stats, see Cumulative Layout Shift.

Current behavior
There is a noticeable CLS (equal to the carousel percentage size)

Expected behavior
ESL carousel should not produce CLS degradation.
@ala-n ala-n added the bug Something isn't working label Jan 23, 2025
@ala-n ala-n added this to the ⚡ESL: 5.1.0 Minor release milestone Jan 23, 2025
@ala-n ala-n self-assigned this Jan 23, 2025
ala-n added a commit that referenced this issue Jan 23, 2025
@ala-n
fix(esl-carousel): fix initial rendering layout shift to eliminate CL…
b18eec4 
…S degradation

Closes: #2879
ala-n added a commit that referenced this issue Jan 23, 2025
@ala-n
fix(esl-carousel): ability to provide slide size fallback trough `--e…
f9d9e7d 
…sl-slide-fallback-size` variable

Relates: #2879
@ala-n ala-n mentioned this issue Jan 23, 2025
Merged
ala-n added a commit that referenced this issue Jan 23, 2025
@ala-n @NastaLeo
fix(esl-carousel): ability to provide slide size fallback trough `--e…
78ae62f 
…sl-slide-fallback-size` variable

Relates: #2879

Co-authored-by: alesun <[email protected]>
ala-n pushed a commit that referenced this issue Jan 24, 2025
@semantic-release-bot
chore(release): 5.0.1-beta.1
064857a 
## [5.0.1-beta.1](v5.0.0...v5.0.1-beta.1) (2025-01-24)

### Bug Fixes

* **esl-carousel:** ability to provide slide size fallback trough `--esl-slide-fallback-size` variable ([78ae62f](78ae62f)), closes [#2879](#2879)
* **esl-carousel:** fix initial rendering layout shift to eliminate CLS degradation ([7d65335](7d65335)), closes [#2879](#2879)
@ala-n ala-n closed this as completed in 7d65335 Jan 27, 2025
This was referenced Jan 31, 2025
Closed
Closed
Closed
Closed
ala-n pushed a commit that referenced this issue Feb 5, 2025
@semantic-release-bot
chore(release): 5.0.1
60b8bc0 
## [5.0.1](v5.0.0...v5.0.1) (2025-02-05)

### Bug Fixes

* **esl-carousel:** ability to provide slide size fallback trough `--esl-slide-fallback-size` variable ([78ae62f](78ae62f)), closes [#2879](#2879)
* **esl-carousel:** fix initial rendering layout shift to eliminate CLS degradation ([7d65335](7d65335)), closes [#2879](#2879)
* **esl-image-utils:** omit console warnings in case of missing inner image ([ca13a8a](ca13a8a))
* **esl-media:** fix play preconditions for toggle method ([#2906](#2906)) ([1f7b8dc](1f7b8dc))
* **esl-media:** postpone BrightcoveProvider ready state notification until metadata is available ([e3d4159](e3d4159))
* **eslint-plugin:** remove peer dependency for esl (handled via warnings) ([c06fbde](c06fbde))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ala-n ala-n

Labels
bug Something isn't working
Projects
None yet
Milestone
⚡ESL: 5.0.* Bugfix release
1 participant
@ala-n