Sibling elements changing width - Chrome only #126

mchandleraz opened this Issue Mar 20, 2013 · 10 comments


None yet
5 participants

I'm "retrofitting" a site with bxslider, and in Chrome I'm having a couple of elements in my sidebar that seem to gaining 1px width every time a slide starts to transition. Once the transition is over, the 1px is removed. When the next slide is about to transition, the 1px comes back.

Oh, and I'm supposed to have this site delivered tomorrow.


stevenwanderski commented Mar 30, 2013

Can you post a link that demonstrates the issue?

pehlert commented Apr 19, 2013

Just to confirm, this happens for me as well and even (actually exclusively) for elements outside the slider. It's a client project I'm afraid and I cannot post real code. I tried to build a synthetic example, but couldn't reproduce the issue. :-/ I'll further investigate and get back when I find a solution.

@mchandleraz, have you been able to find a solution?

pehlert commented Apr 19, 2013

@mchandleraz, can you confirm that this happend only on elements which had their position set to relative?

@pehlert Sorry for the delay, I don't log in to Github too often...

I can confirm that this bug is affecting elements with position: relative;

I set position to static on everything, and the issue disappears. I've noticed it with other sliders as well, actually.

pehlert commented Apr 26, 2013

@mchandleraz Hi, don't worry. I have also replaced all my relative positioned elements by static or absolute boxes and the problem disappeared. I can hardly believe that it is a problem with bxslider. Most likely it is a bug in Chrome itself.

As I don't really see my self as qualified enough to file a bug report against Chrome, I'll just hope someone else figures it out.

@wandoledzep Maybe you could put a note somewhere that warns of Chrome + bxSlider + relatively positioned elements just so that others won't have this unpleasant surprise?

I have the same problem in Safari

I'm having this problem too. I can't change all relative positioned elements in my site. First because this is no nice and i think it's not supposed do that to make things work, second because it's take considerable time and third because i'm using bxslider inside a portlet that later is attached into a page that is inside a portal framework with others collegues' code.

Changing classes in bxslider.css file, doesnt make effect.
By the way it only appears in Google Chorme.

The best solution (ugly hack) that i found googling until now is to create a 1px white or transparent border in yours element. The 1px's brother still there but it will not appears to yours eyes. It's a bad approach, because other elements will not align and if you are using the same element/class in other place, you will have to handle the added 1px to your layout.

If someone knows another alternative and respond here, i'll grateful.

@pr7vinas that's great to know.

@MortenAndersen / @pr7vinas Might be best to take this to the WebKit bugtrackers since it seems to be a WebKit issue. I've seen it on other sliders besides bsxlider.

@mchandleraz, thanks for the fast answer.
I understand that it's probably Google-Chrome's Bug, but people still need an solution.

By the way i solved this issue not using the ugly hack that i mentioned above. What i did was change the order of sizing of my elements. In other words, i changed what elements apply rules in others elements.

I set the elements without margin in bxslider configuration and theirs size is now the [margin] plus [what is supposed to be theirs sizes]. Inside the element i set another div that actually have the original size of my element. This solved my problem and i think it's a less ugly solution because does not force the developer to change others constructions beside bxslider's carousel.

Best regards,
Vinicius Alvarenga.

@pr7vinas Interesting... That gives me an idea. I wonder if box-sizing: border-box; would solve this problem. I'll play around with this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment