Wrong width until page is resized on Firefox #2218

loriepisicchio · 2017-09-27T08:54:15Z

This is a (multiple allowed):

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 · 2017-10-01T21:27:38Z

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

loriepisicchio · 2017-10-03T12:08:23Z

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 · 2017-11-07T14:04:29Z

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

TedBouziat · 2017-11-23T10:53:59Z

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

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

nolimits4web · 2017-11-23T11:43:37Z

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

loriepisicchio · 2017-11-23T12:06:47Z

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 · 2017-11-23T15:23:13Z

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

glemiere · 2018-04-08T06:14:47Z

@loriepisicchio, I have the same problem on Chrome.

glemiere · 2018-04-08T06:39:52Z

@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 · 2018-05-14T14:28:31Z

@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 · 2018-07-17T15:15:23Z

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 · 2018-08-28T12:27:08Z

I have the same problem on Chrome.

Thanks in advance.

adesege · 2018-12-10T20:31:31Z

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 · 2019-01-31T14:17:21Z

Same issue on Mac Chrome 71

jlgouwyapizr · 2019-03-23T17:17:20Z

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

cyasam · 2019-03-24T20:15:16Z

Same issue on all modern browsers

leefernandes · 2019-07-09T15:10:53Z

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 · 2019-12-09T16:33:03Z

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 · 2020-03-27T22:41:40Z

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 · 2020-09-13T07:10:49Z

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 · 2020-11-06T08:53:08Z

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 · 2020-12-09T13:17:05Z

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

ju1ius · 2021-01-19T20:42:53Z

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 · 2021-01-27T07:55:24Z

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

iraqwarvet31 · 2021-01-27T20:44:06Z

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

…

On Tue, Jan 26, 2021, 23:55 Premi Jimee ***@***.***> 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 <#2218 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALQZNT256P4DYFQPF4P54G3S37BHVANCNFSM4D4VW7UA> .

ettoredn · 2021-01-30T05:40:08Z

@Premiii try the module in #4019

nolimits4web · 2021-02-24T09:56:16Z

Should be fixable with this 5f80052

Lukewh mentioned this issue Dec 14, 2018

Missing screenshots navigation canonical/snapcraft.io#1443

Merged

thasmo mentioned this issue Jun 7, 2019

Optimize CSS injection in development mode packmule/packmule#7

Closed

leefernandes mentioned this issue Jul 9, 2019

Swiper not working until I resize browser window #2928

Closed

vltansky added has workaround probably bug labels Jan 21, 2021

MagicLegend mentioned this issue Feb 2, 2021

Scrollbar funky behaviour until resize event #4180

Closed

ettoredn mentioned this issue Feb 23, 2021

Breakpoints based on Container width and not window width with ResizeObserver #4244

Closed

nolimits4web closed this as completed Feb 24, 2021

Repository owner locked and limited conversation to collaborators Feb 24, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrong width until page is resized on Firefox #2218

Wrong width until page is resized on Firefox #2218

loriepisicchio commented Sep 27, 2017 •

edited

Loading

nolimits4web commented Oct 1, 2017

loriepisicchio commented Oct 3, 2017

loriepisicchio commented Nov 7, 2017

TedBouziat commented Nov 23, 2017

nolimits4web commented Nov 23, 2017

loriepisicchio commented Nov 23, 2017

nolimits4web commented Nov 23, 2017

glemiere commented Apr 8, 2018 •

edited

Loading

glemiere commented Apr 8, 2018

ghost commented May 14, 2018 •

edited by ghost

Loading

gunarb commented Jul 17, 2018

Karthik-king commented Aug 28, 2018

adesege commented Dec 10, 2018

frontenddeveloping commented Jan 31, 2019

jlgouwyapizr commented Mar 23, 2019

cyasam commented Mar 24, 2019

leefernandes commented Jul 9, 2019 •

edited

Loading

jordan-webdev commented Dec 9, 2019 •

edited

Loading

iraqwarvet31 commented Mar 27, 2020 •

edited

Loading

spanishsnapper commented Sep 13, 2020

Slipkonn commented Nov 6, 2020

ettoredn commented Dec 9, 2020

ju1ius commented Jan 19, 2021

Premiii commented Jan 27, 2021

iraqwarvet31 commented Jan 27, 2021 via email

ettoredn commented Jan 30, 2021

nolimits4web commented Feb 24, 2021

Wrong width until page is resized on Firefox #2218

Wrong width until page is resized on Firefox #2218

Comments

loriepisicchio commented Sep 27, 2017 • edited Loading

What you did

Expected Behavior

Actual Behavior

nolimits4web commented Oct 1, 2017

loriepisicchio commented Oct 3, 2017

loriepisicchio commented Nov 7, 2017

TedBouziat commented Nov 23, 2017

nolimits4web commented Nov 23, 2017

loriepisicchio commented Nov 23, 2017

nolimits4web commented Nov 23, 2017

glemiere commented Apr 8, 2018 • edited Loading

glemiere commented Apr 8, 2018

ghost commented May 14, 2018 • edited by ghost Loading

gunarb commented Jul 17, 2018

Karthik-king commented Aug 28, 2018

adesege commented Dec 10, 2018

frontenddeveloping commented Jan 31, 2019

jlgouwyapizr commented Mar 23, 2019

cyasam commented Mar 24, 2019

leefernandes commented Jul 9, 2019 • edited Loading

jordan-webdev commented Dec 9, 2019 • edited Loading

iraqwarvet31 commented Mar 27, 2020 • edited Loading

spanishsnapper commented Sep 13, 2020

Slipkonn commented Nov 6, 2020

ettoredn commented Dec 9, 2020

ju1ius commented Jan 19, 2021

Premiii commented Jan 27, 2021

iraqwarvet31 commented Jan 27, 2021 via email

ettoredn commented Jan 30, 2021

nolimits4web commented Feb 24, 2021

loriepisicchio commented Sep 27, 2017 •

edited

Loading

glemiere commented Apr 8, 2018 •

edited

Loading

ghost commented May 14, 2018 •

edited by ghost

Loading

leefernandes commented Jul 9, 2019 •

edited

Loading

jordan-webdev commented Dec 9, 2019 •

edited

Loading

iraqwarvet31 commented Mar 27, 2020 •

edited

Loading