You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When placing a swiperjs.com swiper inside an ion-content (and rendering it with a delay) the swiper doesn't recognize the surrounding dir="rtl". Only happens with ion-content.
rtl should propagate through ion-content regardless of when the component is rendered.
Actual Behavior
create a div with dir="rtl"
put a swiper inside an ion-content inside the div and render it a few ticks later using ngIf
try swiping
swiper doesn't swipe
See linked stackblitz, first swiper works on clean page load but breaks after stackblitz livereload, second swiper doesn't work at all, 3rd and 4th work.
Based on what I've seen so far it looks like the swiper init runs before the swiper element itself is fully integrated in the dom making it not recognize the surrounding style rules as it's still floating somewhere in the deep dark shadow dom.
Get Computed Style reports ltr while theoretically inside the div with RTL and only switches to RTL a few ticks later.
I observed this a few days ago and couldn't find the actual init code, which lead to me creating a feature request #7479 which got promptly shut down without asking why I may have asked for something that should be already present - my enthusiasmus to create a pr for this has somewhat diminished since then.
Check that this is really a bug
Reproduction link
https://stackblitz.com/edit/angular-ywh4p1-vza2cj?file=src%2Fapp%2Fapp.component.html
Bug description
When placing a swiperjs.com swiper inside an ion-content (and rendering it with a delay) the swiper doesn't recognize the surrounding dir="rtl". Only happens with ion-content.
I'm not sure if this is a swiperjs problem or an ionic problem but ionic asked me to create an issue here too: ionic-team/ionic-framework#29368 (comment)
Expected Behavior
rtl should propagate through ion-content regardless of when the component is rendered.
Actual Behavior
See linked stackblitz, first swiper works on clean page load but breaks after stackblitz livereload, second swiper doesn't work at all, 3rd and 4th work.
Swiper version
11
Platform/Target and Browser Versions
macOS Chrom 124
Validations
Would you like to open a PR for this bug?
The text was updated successfully, but these errors were encountered: