Skip to content
New issue

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

#

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

Already on GitHub? # 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 <alesun@exadel.com>
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))
# for free to join this conversation on GitHub. Already have an account? # 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