Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
reintroducing opened this issue Jul 22, 2016 · 8 comments

Comments

@reintroducing
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor Author

@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
Copy link
Owner

akiran commented Jul 22, 2016

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

@reintroducing
Copy link
Contributor Author

@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
Copy link
Contributor Author

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
Copy link
Contributor

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.

@akiran akiran added this to the Oct milestone Oct 7, 2016
@akiran akiran removed this from the Oct milestone Feb 1, 2018
@laveesingh
Copy link
Contributor

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

@oori
Copy link

oori commented Sep 19, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants