[Help]: 1px of previous slide showing for some slides

[pbowyer]

Summary

I've built a responsive slider, with multiple slides on-screen at once. The slides and page are high contrast, and I'm seeing a 1px bar of the previous slide on my screen when certain slides come into view, like this:

I'm guessing it's a rounding error accentuated by dpr, and have started looking through the code, but wanted to see if it's a known problem and known to be unfixable - or if there's an easy known fix?

For my use-case it wouldn't matter if the left edge of some slides was cut off by 1px to ensure nothing of the previous slide was visible, which would get round the rounding problems.

Demo and platforms

I've put together a code sandbox example (below) to demonstrate the issue. Please view it with the .embla container at its 48em max-width; as I chose the dimensions to make the issue more obvious.

I'm seeing the error in Chrome 135 and Firefox 137 on macOS 14.6.1.

In the example it happens only on a retina screen; on a non-retina screen the snapping is okay.
With my actual slider the problem happens with 4 of 9 slides on a retina screen, and 1 of 9 slides on a non-retina screen.

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

https://codesandbox.io/s/embla-carousel-generator-vanilla-forked-r8445d

[davidjerleke]

Hi @pbowyer,

I suspect this issue might be related to subpixel rendering quirks in the browser. One potential solution, not sure it will solve this though, could be to use getBoundingClientRect() to measure the slide and container sizes instead of relying on offsetWidth and offsetHeight which is the current solution.

However, there's a caveat: when the carousel (or its parent, like a modal) is transformed, getBoundingClientRect() returns the transformed dimensions rather than the actual ones. This is actually one of the reasons why Embla moved away from relying on getBoundingClientRect() for measurements in favour of offsetWidth and offsetHeight, because it lead to layout bugs, particularly in cases where the carousel is inside a transformed modal.

I’ve had a task on my to-do list to explore a hybrid approach—using getBoundingClientRect() when appropriate, and falling back to offsetWidth/offsetHeight when a transform is detected. I think that could cover most scenarios. Unfortunately, I haven’t had the time to dive into it yet.

[pbowyer]

Thanks for taking the time to reply @davidjerleke. I'm going to explore subpixel rendering and see what there is out there about these quirks, because that does seem to be the main cause of the problem.

[pbowyer]

And just like that, I think I've found a fix for this particular use-case: https://developer.mozilla.org/en-US/docs/Web/CSS/round.

Thanks to CSS improvements last year there's the round() function. As I have the last slide hanging out of the viewport, I can round the widths of my slides to the nearest pixel and this won't cause me any problems. The specific change I made is:

.embla__slide {
  /* This is the fix - round the size to a whole pixel */
  flex: 0 0 round(var(--slide-size), 1px);
}

Now no white lines messing up my design 😀 Many thanks for your help in identifying the problem!

Demo of the fix: https://codesandbox.io/p/devbox/embla-carousel-generator-vanilla-forked-x233fv

[davidjerleke]

@pbowyer thanks for sharing your solution — really helpful 🎉! I’m sure it’ll benefit other developers as well.

Would you mind making your CodeSandbox example public? I wasn’t able to access it.

[pbowyer]

@davidjerleke there we go - first time using CodeSandbox and I didn't realise they were private by default on free plans!

[davidjerleke]

@pbowyer thanks a lot. Cheers!