Swiper: Wrong width until page is resized on Firefox

[loriepisicchio]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 3.4.2
• Platform/Target and Browser Versions: Firefox 55.0.3 (64 bits) on MacOS Sierra 10.12.6 (16G29)

What you did

We use Swiper to show a list of items. We observe a strange behavior on Firefox.

Expected Behavior

On Chrome, it works fine : our swiper is shown with 3 elements.

Actual Behavior

On Firefox, on page load, only one element is displayed and stretched on the whole page width. We need to resize the page to get the right layout.
When inspecting the generated HTML, we can see that the style element on the swiper-slide divs containing width and margin is not set on first load, but is set after resize.
Note that the elements of the slider are loaded asynchronously.

URL to reproduce :
https://support-swiper-demo.dev.v3.aws.lead.fm
Login : leadformance
Pwd : password

Open it in Chrome or Firefox. After a while you should see "Nearest locations" section above "Our Events" section. We have created 3 stores located around Rostov-on-Don so that you should see locations based on your geolocation. Please let me know if you are located elsewhere so that I can create new locations working for you.

Screenshot on Firefox before resize (bug)
https://s3-eu-west-1.amazonaws.com/swiper-demo-screenshots/Capture+d%E2%80%99e%CC%81cran+2017-09-27+a%CC%80+08.38.26.png

Screenshot on Firefox after resize (expected result)
https://s3-eu-west-1.amazonaws.com/swiper-demo-screenshots/Capture+d%E2%80%99e%CC%81cran+2017-09-27+a%CC%80+08.39.37.png

[nolimits4web]

Can you show how do you initialize Swiper and what options do you use?

[loriepisicchio]

The slider is initialized like this :

const $nearestStoresSlider = this.$el.find('[data-lf-nearest-stores-slider]');
swiperSlider($nearestStoresSlider, sliderOptions);

Here is the value of sliderOptions

radius: '%bridge_front_starter_kit.search.radius%'
options:
  pagination: '.swiper-pagination'
  simulateTouch: false
  paginationClickable: true
  slidesPerView: 3
  spaceBetween: 60
  breakpoints:
    1200:
      slidesPerView: 3
      spaceBetween: 30
    992:
      slidesPerView: 2
      spaceBetween: 30
    768:
      slidesPerView: 1
      spaceBetween: 30

[loriepisicchio]

Hi !
Any update on this issue please ?
Thanks in advance.

[TedBouziat]

Hello @nolimits4web ,
do you have some update for lorie please ?

We are stuck on this...
Thanks for your help !

[nolimits4web]

Looks like demo not working for me anymore (no stores located). Have you also tried new v4 Swiper?

[loriepisicchio]

Hi !
We have assumed that you were located near Rostov-on-Don (based on your GitHub bio). Please tell us where you're located, and we'll create store near you so that you can use the demo.

No we did not test v4 yet.

[nolimits4web]

Yes, i'm in Rostov-on-Don, but it doesn't show me anything. Recommend also to check with v4

[glemiere]

@loriepisicchio, I have the same problem on Chrome.

[glemiere]

@nolimits4web never mind, in my case it was because I was hiding the scrollbar on Chrome using :

::-webkit-scrollbar {
  display: none;
}

The problem is that the value of slideSize & co won't take in consideration the fact that the scrollbar has been hidden. Simple.

Hope it can help someone.

[ghost]

@nolimits4web same problem on Chrome 66 on Mac.
Initial width calculation is different than resized calculation. I only resized height to make sure.
Quick workaround.

on: {
    init() {
        setTimeout(() => {
        window.dispatchEvent(new Event("resize"))
        }, 200)
    },
},

[gunarb]

Hi there,

I was having the same issue only on firefox, I checked the container parent of the swiper with the same crazy width as the swiper, and add width: 100% and fixed it.

Hope it works if any one has a similar issue.

[Karthik-king]

I have the same problem on Chrome.

Thanks in advance.

[adesege]

After several days of trying to solve this annoying bug, found out that the problem was cos of a display: flex defined on one of the top parent element.

This might need to be added to the documentation to help others in future

[frontenddeveloping]

Same issue on Mac Chrome 71

[jlgouwyapizr]

same here with the latest version of swiper, on chrome as well.

[cyasam]

Same issue on all modern browsers

[leefernandes]

When are you initializing Swiper?

If your page CSS hasn't loaded before initializing Swiper, and your CSS affects the dimensions of your swiper container after it's been initialized your width will likely be incorrect.

To verify if this is your issue try waiting for the window load event before initializing Swiper.

window.addEventListener('load', () => {
// init swiper here
}, false);

It's common to use DOMContentLoaded but this event fires without waiting for stylesheets to load. https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

"The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading."

[jordan-webdev]

To verify if this is your issue try waiting for the window load event before initializing Swiper.

window.addEventListener('load', () => {
// init swiper here
}, false);

I just tried doing a window resize in the load event listener. That appears to work for me. I figured it's nicer to do that, rather than wait until everything is loaded before the sliders are loaded. It might make the page appear to load faster this way, though I'm only assuming this.

window.addEventListener('load', () => {
    // Resize refreshes sliders
    $(window).resize();
  }, false);

Note, I used jQuery a bit there.

[iraqwarvet31]

Having the same issue on Chrome only v80. I'm currently using version 5.2.1 and tried all of the above workarounds with no fix. Firefox works perfect, but with Chrome I have to resize the window for swiper to be initialized.

UPDATE
Found out my issue was an extension causing it.

[spanishsnapper]

Issue also occurring in Safari 13.1.2 when parent element is display:grid.
grid parent element is set to 100% width, overflow:hidden

Waiting for window.load does not solve issue.

[Slipkonn]

Faced that in Chrome, in my case swiper container was a flex child item and had no width set.
Setting it's width to 100% solved that without any js.

[ettoredn]

Maybe this is related to #4019, that is the container changes its size after swiper has been initialized.

[ju1ius]

Hi, I think I've been struck by this bug.
Please check this repro on codesandbox.

Here the slider is inside a grid item that spans two columns when the viewport width is >= 992px.
When resizing the window in firefox you can see that slide dimension computations become erratic above 992px.
When an explicit size is given to the grid item (width: 100%;), slide dimensions are computed correctly.

Note that it only happens in Firefox.
As @ettoredn noted, using ResizeObserver might be the way to go to avoid this kind of issue.

[Premiii]

Hi,
Is there any update on the above issue? I really need help if anyone could help me.

[iraqwarvet31]

I wish there was. Owner of the repository is horrible about responding

On Tue, Jan 26, 2021, 23:55 Premi Jimee [e-mail] wrote:

Hi,
Is there any update on the above issue? I really need help if anyone could
help me.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/nolimits4web/swiper/issues/2218#issuecomment-768105462,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALQZNT256P4DYFQPF4P54G3S37BHVANCNFSM4D4VW7UA
.

[ettoredn]

@Premiii try the module in https://github.com/nolimits4web/swiper/issues/4019

[nolimits4web]

Should be fixable with this https://github.com/nolimits4web/swiper/commit/5f8005274ee0f379cfe31d4cde65951816595aad