shoelace-style/webawesome

<wa-carousel> doesn't always support interactivity inside on iOS / Safari

Open

#2,658 opened on Jul 22, 2026

 (0 comments) (0 reactions) (0 assignees)TypeScript (157 forks)github user discovery
bughelp wanted

Repository metrics

Stars
 (1,104 stars)
PR merge metrics
 (Avg merge 1d 15h) (67 merged PRs in 30d)

Description

Description

On iOS Safari (maybe on touch devices in general), a <wa-carousel> can't handle interactive content like links or buttons inside of a <wa-carousel-item> correctly if you've used pagination or navigation.

  • Events like "click" or "pointerdown" never reach the interactive element. Logging event.target for every click event on document always returns the <wa-carousel> but not the actually clicked child. CSS styles for active buttons don't show up. The element also doesn't appear in the list returned by elementFromPoint(). Selecting text gives the visual feedback of iOS that something was selected, but the actually visible text isn't highlighted. Instead, other text (e.g. of a previous item) is selected.
  • If the element was visible from the beginning or it's page was accessed by swiping (not pagination / navigation) it's still interactive. (That's what I assume, in another example they were never interactive.)
  • Interactivity inside of a <wa-carousel> works completely as expected on Firefox on my Ubuntu PC.

I think that maybe the automated scrolling of pagination / navigation causes things to break, for example another element (potentially another carousel-item) is above the visible elements.

To Reproduce

I adjusted the <wa-carousel> of https://webawesome.com/docs/components/carousel/#adding-and-removing-slides.

<wa-carousel pagination navigation>
  <wa-carousel-item style="background: red">
    <a href="#">This link is interactive</a> Drag / Swipe to the next page.
  </wa-carousel-item>
  <wa-carousel-item style="background: orange">
    <a href="#">This one too</a> Use pagination / navigation to get to the next page.
  </wa-carousel-item>
  <wa-carousel-item style="background: yellow">
    <a href="#">This one isn't</a>Select some text here. It will probably select "This" in the previous item.<br>Go back using pagination / navigation. The link there will stay interactive.
  </wa-carousel-item>
</wa-carousel>

Browser / OS

  • OS: iOS 18.7.8
  • Browser: Safari 18.7.5

Contributor guide