embla-carousel
embla-carousel copied to clipboard
[Bug]: Frame rate drop in iOS devices w/ ProMotion
Which variants of Embla Carousel are you using?
- [x] embla-carousel (Core)
- [x] embla-carousel-react
- [ ] embla-carousel-vue
- [ ] embla-carousel-svelte
- [ ] embla-carousel-autoplay
- [ ] embla-carousel-auto-scroll
- [ ] embla-carousel-solid
- [ ] embla-carousel-auto-height
- [ ] embla-carousel-class-names
- [ ] embla-carousel-fade
- [ ] embla-carousel-docs (Documentation)
- [ ] embla-carousel-docs (Generator)
Steps to reproduce
- on iOS Devices with ProMotion(iOS's Adaptive 120Hz refresh rate),
- when swiping or directly triggering methods like
scrollPrev,scrollNext, andscrollTo, - the overall animation frame rate appears to be reduced by half.
Note: ProMotion is available on Pro models from the iPhone 13 series and later.
Expected Behavior
Animations should run at full frame rate.
Additional Context
Enabling low power mode will limit the refresh rate to a maximum of 60Hz, making it more noticeable.
What browsers are you seeing the problem on?
All browsers
Version
v8.6.0
CodeSandbox
No response
Before submitting
- [x] I've made research efforts and searched the documentation
- [x] I've searched for existing issues
- [x] I agree to follow this project's Contributing Guidelines for bug reports
It seems that iOS WebKit imposes a framerate limitation by default.
While this restriction can be lifted via a feature flag in the Safari app, it is not possible to do so in other environments such as third-party browser apps or PWAs.
@kickbelldev Thanks for the bug report. Here are my observations:
On 60Hz devices (tested on iPhone 8 and iPhone 12)
- Animations appear smooth.
On 120Hz devices (tested on iPhone 16 Pro)
- Prefer Page Rendering Updates near 60fps
ENABLED: Animations are almost always smooth. - Prefer Page Rendering Updates near 60fps
DISABLED: Animations are smooth.
It seems the throttling introduced by enabling "Prefer Page Rendering Updates near 60fps" on 120Hz devices causes animation stutter, while 60Hz devices remain unaffected and run smoothly.
Will Apple set this setting to disabled as default soon?
As of now, Apple has not announced plans to set the "Prefer Page Rendering Updates near 60fps" feature to disabled by default in future versions of Safari. This setting remains an optional toggle within Safari's Developer or Advanced settings, and users must manually disable it to enable higher frame rates.
In fact, Apple has removed the "Prefer Page Rendering Updates near 60fps" option from Safari's Experimental Features menu entirely in Safari 17/macOS Sonoma. This change suggests that Apple may be moving away from this feature, but there is no official confirmation that it will be disabled by default in future releases.