Why isn't the viewport width being used for Firefox?

[dennisnissle]

Hi there,

I've been analyzing a width-problem for slider images when using FF which leads to images being wider than the actual viewport. In slider.doMath function there is a line (since latest release) which uses the slider.width instead of the slider.viewport.width for Firefox specifically:

if (slider.isFirefox) { slider.w = slider.width(); }

https://github.com/woocommerce/FlexSlider/blob/master/jquery.flexslider.js#L1009

That leads to the problem that when using vertical thumbnails next to the gallery, the slider image width is calculated based on the total slider width which includes the thumbnail width instead of applying the viewport width (which is being used for all the other browsers). Seems like a bug to me. For a demo please see: http://demo.vendidero.de/produkt/vendichique-evening-blue/

Cheers

[javialm]

Same problem. Depending of the image, it could be not displayed properly. The image can be seen cutted from the right side.

[javialm]

Could be a solution?

replace at line 1009 this: if (slider.isFirefox) { slider.w = slider.width(); } by this if (slider.isFirefox) { slider.w = slider.slides.parent().parent().first().width(); }

[rogercoathup]

Also seeing the same problem. Image width is calculated incorrectly on Firefox, and displayed partially off the right edge of the viewport.

[IvanBalakirev]

Same here, live example https://impreza15.us-themes.com/product/ankle-strap-sandals/

[scheurta]

Three years later. Any updates on this?

[pembo13]

Is this jQuery plugin maintained at all? At least in modern Firefox, the Firefox width calculation is off.

[loptimisator]

Hello, I just fixed that issue by overwriting the minified jquery file from woocommerce/assets/js/flexslider/jquery.flexslider.min.js

I changed this : m.isFirefox&&(m.w=m.width()) To this : m.isFirefox&&(m.w=m.viewport()) <- UPDATE : Do not wore anymore

It will use the width of the viewport in place of the entire slider.

Wish this can help! Its worked perfectly for me as i use the thumbmails on left side.

EDIT : After an auto-update, my fix didnt work anymore (log error : m.viewport is not a function...).. I actually dont know why but this new edit do the job :

NEW FIX :

change this : m.isFirefox&&(m.w=m.width()) to this : m.isFirefox&&(m.w=(m.viewport===undefined?m:m.viewport).width())

There is for sure better way to handle this but i'm still learning and haven't actually the time to focus on that..