100% width slider - Weird margin on left side (Chrome)

[nzifnab]

I have a slider that's 100% width, however it is doing something strange when the page loads... It starts out ok, but after the slider has adjusted it's height the entire thing shifts slightly to the right so that there's this 1-2 centimeter margin on the left side. Scrolling through the images exacerbates this margin and you can see large sections of the previous image on that side.

The problem immediately fixes itself if I adjust the window size even just barely. Also the problem fixes itself the moment I open Chrome Developer Tools to inspect the element to debug the issue... So it's a bit elusive to figure out since it vanishes the moment you try.

See the page this is occurring on here: http://staydia.com/test/

Note that this is happening on Mac OS using google Chrome version 43.0.2357.130 (64-bit) The problem does NOT occur on Firefox. I don't have my windows computer handy so can't check there at the moment.

Is there any way for me to fix this issue? (Is there a callback or method I can 'force' it to fix itself after the image and slider height have been adjusted?)

[KevinBatdorf]

I cant reproduce it on my Mac with Chrome Version 43.0.2357.134 (64-bit) but I have seen it happen before. It has to do with the way browsers calculate % widths at the sub pixel level.

Sometimes setting the images to display:block fixes it. Also, adding the image width and height attributes such as `' also helps (just set it to the natural width and height and it will still be responsive).

This is what happens when the browser resizes. Note that I wrote this code a long time ago so it could probably use some refactoring ;-)

  // Set events and fire on browser resize
  _this.responsiveEvents();
  jQuery(window).bind('resize orientationchange', function() {
    _this.responsiveEvents();

    clearTimeout(_this.resizingTimeout);
    _this.resizingTimeout = setTimeout(function() {
      var height = (_this.options.autoHeight) ? _this.getHeight() : _this.getHeighestPanel(_this.nextPanel);
      _this.adjustHeight(false, height);
      // convert to pixels
      jQuery(_this.sliderId + ' .ls-panel').css('width', jQuery(_this.sliderId).outerWidth(true));
    }, 500);
  });

I would try the .responsiveEvents(); function first and see if that works. Then add some other stuff.

[nzifnab]

Took me a bit of digging to figure out how to get a handle on the correct object, but this seems to have resolved the problem as far as I can tell:

$("#slideshow").data('liquidSlider').responsiveEvents()

Which I put immediately after initializing the slideshow on my #slideshow element.

Thanks for the pointer :)

[KevinBatdorf]

Ah yeah,

Otherwise you could add it to the callback() function by using this.responsiveEvents() (I think) which I suppose I should have added. Sorry but glad you figured it out.