bootstrap-switch Issue with on/off layering over each other in Chrome when refreshing/zooming out

pretty simple to reproduce (latest versions of firefox and safari working correctly)

Chrome Version 43.0.2357.124 (64-bit) Mac OS X 10.10.3

http://www.bootstrap-switch.org/examples.html
zoom out once (CMD + - for Mac)
refresh page
size example will now look like this

screen shot 2015-06-09 at 5 02 49 pm

how it looks normally

screen shot 2015-06-09 at 5 03 52 pm

it seems to only effect mini and small size, the rest still work fine

Jun 09 '15 21:06 jcope2013

I fixed by adding this to the bottom. Hope this works

Jul 24 '15 08:07 arequal

I was able to address the problem with mini-sized switches by adding the following CSS:

.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
  font-size: 11px;
}

Aug 28 '15 22:08 highplainsscripter

A better solution can be found by fixing the bootstrap-switch's prototype function _width():

BootstrapSwitch.prototype._width = function() { var $handles, handleWidth, labelWidthFloated, rect; .... /* Updates to fix invalid widths causing UI problems when browser is zoomed * Uses the bounding rectangle which contains the floating point values to maintain * correct widths as they will under or overflow the boundaries when truncating to * integers with jQuery width() and outerWidth(). */ rect = this.$label[0] ? this.$label[0].getBoundingClientRect() : undefined; //IE8 doesn't support width so it must be calculated by subtracting the right and left edges of the element labelWidthFloated = rect ? rect.width ? rect.width : rect.right - rect.left : undefined; this._labelWidth = this.$label.outerWidth() !== labelWidthFloated ? labelWidthFloated : this.$label.outerWidth(); this.$container.width((this._handleWidth * 2) + this._labelWidth); return this.$wrapper.width(this._handleWidth + this._labelWidth); };

Jan 28 '16 20:01 kmd4v

@kmd4v , Thanks for this, this appears to have fixed the issue for me.

May 07 '16 20:05 KTrentLR

There is a related PR #525

May 26 '16 12:05 tlk

I use the fix suggested in https://github.com/nostalgiaz/bootstrap-switch/issues/547#issuecomment-198862367 - it's simple and it appears to do the job.

May 26 '16 12:05 tlk

I was seeing this issue in normal size switches (not just mini or small) with Bootstrap 2 on chrome Version 51.0.2704.84 m with various resolutions and zoom levels. The solutions provided by @kmd4v above and referenced in #547 reduced the occurrence of the issue, but I still noticed the problem at extreme zoom levels.

I ended up using the following CSS to resolve the issue: .bootstrap-switch-container{ white-space:nowrap; }