bug: swiper inside ion-content not recognizing dir="rtl" when rendered dynamically about ionic-framework HOT 3 CLOSED

Thanks for the additional information. I am able to reproduce this, but this does not appear to be an Ionic bug.

The main issue here is that Swiper calls getComputedStyle on the swiper-container element to query for the direction. This requires that the correct direction is set on that element at the time that code is run.

This code is run after the ancestor's Shadow DOM has been created, but before the slot has been added. In Chrome, this means that swiper-container will not inherit the correct direction until after the slot has been added. Since this code is run before that happens, the code I mentioned above reports that swiper-container has direction: ltr set.

This issue also reproduces with the dum-my component added in your sample. Your original code used ng-content which puts the swiper-container inside of the Shadow DOM. This is different from ion-content which projects swiper-container in a slot instead. By changing ng-content to slot in dum-my the issue will reproduce there as well.

As for why this is the case, it has to do with how CSS inheritance is defined:

For a [DOM] tree with shadows, inheritance operates on the flattened element tree. This means that slotted elements inherit from the slot they’re assigned to, rather than directly from their light tree parent.

This means that swiper-container should inherit from the slot element inside of ion-content not ion-content itself. Since slot has not been added yet, swiper-container does not have anything to inherit from, so it uses the default value for direction which is ltr.

Here's an example of this problem outside of Ionic: https://codepen.io/liamdebeasi/pen/rNbPKxN?editors=1010 I also checked the color property too to demonstrate that this issue is not specific to the direction property.

I am going to close this, but let me know if you have any questions.

from ionic-framework.

Does this issue reproduce without Swiper? If it only reproduces with Swiper, then you should file a repo on the Swiper repo instead.

from ionic-framework.

Yes and no, this is swiper specific but it only happens when I put the swiper in ionic.

I suspect it's actually some edge case interaction between ionic and the swiper but I created an issue with them as you asked nolimits4web/swiper#7483

I was a bit hesitant to create a new bug there as I created a feature request asking for this exact thing a few days ago and got closed without any conversation with "we already do this" nolimits4web/swiper#7479

from ionic-framework.