If no padding/margin on slide items then slither of previous/last is shown

[reintroducing]

You can duplicate this in your demos: https://www.dropbox.com/s/df644qnyzqavejk/Screenshot%202016-07-21%2021.45.52.png?dl=0

If you take off the padding/margin on the h3s and alter their colors to see this more clearly you will see the issue. Let me know if you need any other information to help troubleshoot this.

[blairanderson]

I have seen this too but only when padding/Margin is float or % and not a whole number.

On Jul 21, 2016, at 7:52 PM, Matt Przybylski [email protected] wrote:

You can duplicate this in your demos: https://www.dropbox.com/s/df644qnyzqavejk/Screenshot%202016-07-21%2021.45.52.png?dl=0

If you take off the padding/margin on the h3s and alter their colors to see this more clearly you will see the issue. Let me know if you need any other information to help troubleshoot this.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[reintroducing]

@blairanderson when implementing react-slick in my project I had items that had none of either and saw this which is what made me curious about it in the first place. When I was able to duplicate it in the demo by doing as I described above I realized it wasn't something I was doing but an issue with the module itself.

[akiran]

@reintroducing Can you replicate the issue with this jsfidlle
https://jsfiddle.net/kirana/20bumb4g/

[reintroducing]

@akiran Thanks, I went ahead and replicated it. Initially I could not and I think I now realize where the issue shows up. See this fiddle: https://jsfiddle.net/m2mdb7sb/8/

It seems that it is dependent on the window size vs carousel size. In this instance, the carousel is 90% wide and my "viewport" if you will is as seen in this screenshot: https://www.dropbox.com/s/k47d2zmg3uenac5/Screenshot%202016-07-22%2007.57.17.png?dl=0

As you can see in this screenshot, the first item has about a pixel before it showing of the previous (in this case last) slide. You can most easily replicate this by just scaling the viewing window and as you scale you will see at which point the pixel appears and then you can refresh to have a fresh version on that size and see it happens on first load.

Now, if I scale the size down, the issue disappears (or reappears at certain intervals based on the above): https://www.dropbox.com/s/nncud252cran95x/Screenshot%202016-07-22%2007.57.58.png?dl=0

I'm assuming that there is some sub-pixel rounding issues happening in the background that is causing the previous and/or next (in some instances) slides to scale larger than they should and thus bleeding over the currently visible slide.

Obviously if the carousel container is set to a hard width this does not happen as the width is always a set value but to be truly responsive the carousel should have the ability to be set to percentage widths.

Hope this helps. Let me know if you need anything else.

[reintroducing]

And one quick follow up, even if you use your original fiddle link and resize the viewport of the fiddle you will see the second image (on the right) sometimes the gray "bleeds through" to the current slide (since your slides are not 100% wide) and its very easy to spot there.

[blairanderson]

PRs welcome

On Jul 22, 2016, at 5:59 AM, Matt Przybylski [email protected] wrote:

@akiran Thanks, I went ahead and replicated it. Initially I could not and I think I now realize where the issue shows up. See this fiddle: https://jsfiddle.net/m2mdb7sb/8/

It seems that it is dependent on the window size vs carousel size. In this instance, the carousel is 90% wide and my "viewport" if you will is as seen in this screenshot: https://www.dropbox.com/s/k47d2zmg3uenac5/Screenshot%202016-07-22%2007.57.17.png?dl=0

As you can see in this screenshot, the first item has about a pixel before it showing of the previous (in this case last) slide. You can most easily replicate this by just scaling the viewing window and as you scale you will see at which point the pixel appears and then you can refresh to have a fresh version on that size and see it happens on first load.

Now, if I scale the size down, the issue disappears (or reappears at certain intervals based on the above): https://www.dropbox.com/s/nncud252cran95x/Screenshot%202016-07-22%2007.57.58.png?dl=0

I'm assuming that there is some sub-pixel rounding issues happening in the background that is causing the previous and/or next (in some instances) slides to scale larger than they should and thus bleeding over the currently visible slide.

Obviously if the carousel container is set to a hard width this does not happen as the width is always a set value but to be truly responsive the carousel should have the ability to be set to percentage widths.

Hope this helps. Let me know if you need anything else.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[laveesingh]

I'm not sure if the issue is still there. Please feel free to request reopen if disagree.

[oori]

It's still there.
quick and dirty bypass is: .sliderContainer { margin-left: 1px; }