Wired behavior with lazy loading images in RTL direction

[DaviddFF]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/devbox/48cy6j?file=%2Fsrc%2Findex.html&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvdj2bak0006356iarrkb0uq%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvdj2baj0002356i375wyngr%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvdj2baj0004356idbjz2asz%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvdj2baj0005356idrtbito5%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvdj2baj0002356i375wyngr%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvdj2baj0001356iz7v3gs1j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clvdj32ie0002356in2vkul7d%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvdj2baj0002356i375wyngr%2522%252C%2522activeTabId%2522%253A%2522clvdj32ie0002356in2vkul7d%2522%257D%252C%2522clvdj2baj0005356idrtbito5%2522%253A%257B%2522id%2522%253A%2522clvdj2baj0005356idrtbito5%2522%252C%2522activeTabId%2522%253A%2522clvdj2v5v007s356iyapo7jhq%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522Development%2522%252C%2522port%2522%253A1234%252C%2522id%2522%253A%2522clvdj2v5v007s356iyapo7jhq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clvdj2baj0004356idbjz2asz%2522%253A%257B%2522id%2522%253A%2522clvdj2baj0004356idbjz2asz%2522%252C%2522activeTabId%2522%253A%2522clvdj2r43006o356ixyffxw0z%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvdj2baj0003356iqcez7z57%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clvdj2dt3000cdaf825jo1hqg%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522Development%2522%252C%2522id%2522%253A%2522clvdj2r43006o356ixyffxw0z%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug description

as you can see it is a full function code that show some simple slides that all contains only one img tag that load in lazy mode. if you check this page you can see images not loaded until you scroll over slides to make them loaded. but I found that if you remove dir="rtl" from HTML tag, we can not see this problem.

additionally, I found that if i reduce number of slides to 2, 3 slides, it works without any problems. so i found that dir="rtl" and number of slides more than 2,3 items cause this problem. but i want to use it in RTL documents and my slides is more that 20 slides.

i should mention that you can see this problem only with chrome browser.

Expected Behavior

i want to use it in RTL documents and my slides is more that 20 slides.

Actual Behavior

images not loaded in RTL documents

Swiper version

11.1.1

Platform/Target and Browser Versions

chrome 124

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[nolimits4web]

t0ggles-create Swiper

[t0ggles]

Task nolimits4web/SWIPER-92 was created

[DaviddFF]

@nolimits4web Did you see the problem?

[DaviddFF]

any update about this problem ?

[function-charlesmarsh]

+1 I am also seeing this issue. When using RTL mode images with a loading="lazy" attribute are not being loaded until first interaction with the slider

[aahmadbashir]

we have this problem too and it`s really irritating because we have to load all images in eager mode that causes site pages to be loaded very slowly.

is there any plan to fix this bug ?

[nolimits4web]

Unfortunately it is a Chrome bug, as it happens even without Swiper initialized and works fine by other browser. You should file a bug for Chrome instead

[t0ggles]

Task nolimits4web/SWIPER-92 status changed to Done