[Help]: Flashing images

[streamzyuk]

Summary

I dont know if anyone had this issue before.
I am trying to implement netflix’s imterface.
When opening detail modal box, I set the background page to fixed and position its top to current scrollY and overflow hidden to prevent the background from scrolling. This is fine.
But when the modal is closed I set the background page to static again and scroll window to its original position.
When I call the scroll, all the images in the carousels flashes once.
This only happens on ios(Safari and Chrome)
I tried flickering advises on the issues page(Translate3d, backface hidden)
Could bot solve it.
Tried swiperjs. Its the same behaviour.
Tried splidejs which is a css transitions only. This works fine.
The issue has to do with hardware acceleration or something else.
Any advise to fix it please

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• 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)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

@streamzyuk thank you for your question. I have to get straight to the point here: Without a CodeSandbox with your setup it's impossible to give you advice and/or understand why this is happening.

You may create a sandbox with a minimal setup with unnecessary details stripped, enough to reproduce the problem. Let me know if you intend to provide that.

[davidjerleke]

@streamzyuk @miyendiz,

If I comment this line out like so:

// EmblaCarousel(viewportNode, OPTIONS) 

...which means no Embla carousel is initialized anymore, the flashing still happens on iOS devices. So it doesn't seem like Embla is the culprit.

[miyendiz]

Thank David,
I dint try that but I tried to init with options Active = false and the flashing goes away

[davidjerleke]

@miyendiz so just to be clear I didn’t say Embla isn’t causing this, what I meant was that it doesn’t seem likely at this point.

However, for me to spend more time debugging this, I want better proof or a stronger indication if you will, that Embla is the culprit. If the problem happens with Embla not being used at all, which is the case here, I would suggest that you try to find what’s causing this when the Embla script is out of the picture first.

Thanks for understanding.

[miyendiz]

Hi David,
Thank you for your time.
I believe the issue has nothing to do with Embla.
It has something to do with 3d transformations on ios.
I have deleted the
transform: translate3d(0, 0, 0);
from embla__slide css class and when you comment out the
EmblaCarousel(viewportNode, OPTIONS)
the flashing goes away.

I did the workaround as to reinit with active option = false (and saved the current translated position as you have advised on another thread) and used element.style.translate to keep the current snappoint when the modal is displayed and when the modal is closed reinit with active= true.
No flasing any more.
I have updated the sandbox. You can try and see that flasing is gone.

all the best

[davidjerleke]

@miyendiz thanks for sharing the solution and I'm glad you got it sorted. In most cases, transform: translate3d(0, 0, 0); on the slides will improve the scroll smoothness. But in your case, you have so many carousels so I guess the browser suffers from too many hardware accelerated elements.

Best,
David

[miyendiz]

Just to let you know that the issue is still there even without the the transform3d on slides.
You have to de activate the embla to fix the issue as embla uses transform3d internally.
Anyway deactivate/activate solved my issue.
Thank you