How to fix Dawn theme slider scroll issue on mobile?

[jbk1]

Hi all, I’m trying to solve some behavioural issues on mobile (iOS 14.8.1) with product image slider elements (like a carousel, Dawn theme calls it a ‘slider’) that have a button, like below:

which when clicked in order to scroll, scrolls by the incorrect amount causing the edge of the next image to be cut off from view. e.g.

When swiping the slider (internal OS behaviour) it stops the correct place, it’s just these slider element buttons which result in a scroll of the incorrect amount/to the incorrect position. It happens on mobile no matter the browser. It does not happen when viewing on desktop and shrinking browser window down to mobile size, so it’s just on mobile that it’s doing this.

The JS that’s providing this functionality is in the class sliderComponent in the onButtonClick event which can be found in assets/global.js, around line ~553:

global.js

onButtonClick(event) {
    event.preventDefault();
    const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderFirstItem.clientWidth : this.slider.scrollLeft - this.sliderFirstItem.clientWidth;
    this.slider.scrollTo({
      left: slideScrollPosition,
      behavior:'smooth'
    });
  }

A play with using window.outerWidth, as below, does not help:

const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + window.outerWidth : this.slider.scrollLeft -window.outerWidth

Can anyone help me understand what the problem is here and help me find, or provide me with a solution to fix this?

Thanks in advance.

[dmwwebartisan]

@jbk1

Please share the store URL & screenshot of what do you want!

Thanks!

[jbk1]

The faulty behaviour can be seen on all dawn2.0 base themes, so load any one and view product or collection images in slider and the button will show the same incorrect scrolling behaviour. What do I want?; the button to scroll the media by the correct amount.

[jbk1]

@moderators, please delete this post (I’m unable to do so for some reason (I am OP)).

[DelightCart]

Can you please share your store URL? So, I can provide your perfect guideline.

[jbk1]

‘Provide my perfect guideline’, what exactly do you mean?

This happens on all Dawn2.0 themes, just view product show slider on mobile and you’ll see it. It’s all clearly explained in the original post.

[made4Uo]

Hi,

Dawn is using a resizeObserver. Have you tried reloading when you change to mobile? Or have you view this in a real device? It should not create an issue

[Alexander22]

I’m facing absolutely the same problem on my website. On every mobile device’s this standard theme carousel has an issue with scrolling behaviour.

When swiping the slider (internal OS behaviour) it stops the correct place, it’s just these slider element buttons which result in a scroll of the incorrect amount/to the incorrect position. It happens on mobile no matter the browser. It does not happen when viewing on desktop and shrinking browser window down to mobile size, so it’s just on mobile that it’s doing this.

Support can you please help with this? Because our clients are living the website after 20 sec when they not able to normaly scroll those pictures. It’s just a shame…

[FullStackDev]

Hello,

I had a similar issue with the Dawn latest theme, and I managed to resolve it. If you’re still facing problems, you can try the following steps:

1. Overflow Issue:
It seems the problem lies with the .grid--1-col .grid__item element not having an overflow:hidden property.
This should ensure that content within this element is contained properly.

Additionally, you might want to adjust the negative paddings of your slider component. Depending on your specific use case, you can experiment values.