Owl carousel autoheight не работает

autoHeight breaks on Safari #556

Comments

ndimatteo commented Oct 14, 2014

When OwlCarousel initializes on safari the height is set to 1px for some reason. This seems to only affect carousels with the ‘autoHeight’ plugin being used. The only way to jig it properly is either going to a new slide (recalculates height properly) or refreshing the page (works sometimes).

This only happens in safari (both desktop & mobile iOS)

and here’s a screenshot:

ERROR	CORRECT

The text was updated successfully, but these errors were encountered:

ndimatteo commented Oct 16, 2014

Until they release a fix for this, if anyone’s looking for a quick solution, I added this to force it to recalculate:

unostella commented Oct 21, 2014

Hi @ndimatteo, I tried to use this fix but the problem was still there.
The way around it is to enforce refresh with autoPlay or what worked for me, triggering owl within window load, that’s also nested in document ready.

joeyjoejoejr commented Feb 13, 2015

Can someone verify that this is still an issue?

seamofreality commented Apr 28, 2015

Yes, currently working on a project where this is still an issue.
Our temporary fix is to wait until the carousel images are loaded and init it then so the size is calculated correctly.

lolsps commented Jun 30, 2015

Still an issue. I decided to avoid this option and make images the same.

fulopattila122 commented Jul 9, 2015

As of today it’s still an issue and neither @ndimatteo’s nor @unostella’s workaround did not work for me. In case of the latter it says Uncaught ReferenceError: owl is not defined . Removing the autoHeight option did help.

subduer commented Dec 5, 2016

Hi! I have same problem: Uncaught ReferenceError: owl is not defined.
It appear only once, after web browser starts. Refresh web or navigate somewhere on web makes my OWL working.
None of these workarounds works 🙁 Any ideas? Any other workarounds?

Haprog commented Nov 30, 2017

This issue still seems to persist but also affects Chrome and other browsers.

And I’m pretty sure these issues are all duplicates of this one: #760, #835, #1381, #2039, #2054, #2113.

I’m dynamically creating and initialising the carousel after page has been loaded (window load event has been executed already) and had to figure out a workaround for this problem. This is what I came up with:

Just add this onload handler to each in the carousel:

This seems to work nicely. It will trigger a refresh of the carousel every time an image in the carousel has loaded if the carousel’s auto height wrapper’s height is still 1px (initial size).

First I tried a simpler approach of always just triggering the refresh on image load event but that seemed to cause an infinite loop of triggering the load events and carousel refreshes and the browser would cause constant high CPU usage when the page is open. So this is why I had to add the check to only refresh if the height hasn’t been set yet.

Haprog commented Nov 30, 2017

Actually my workaround above doesn’t seem to be foolproof. It is better than nothing, but still in some cases it seems to not set the height. When I was testing in our project without the fix above I rarely saw the height problem normally, but I could consistently reproduce it when using Chrome’s network throttling set to Fast 3G. With the above fix it seems to work ok on Fast 3G, but still fails to set the height on Slow 3G throttling.

robertrhu commented Jan 15, 2018 •

I was having this issue due to slow site load. Came up with the following solution. See the linked thread.
#2185

Источник

Chrome and autoHeight shows 1px height image when refresh page #538

Comments

jdmoliner commented Oct 3, 2014

When I’m using chrome and refresh the page, the image is only 1px height.

You can check the bug here. Only when refresh the page and chrome:

The text was updated successfully, but these errors were encountered:

leandroruel commented Oct 8, 2014

it’s working now, close the issue

jdmoliner commented Oct 8, 2014

The bug is still.
Now it is working but with a css trick:

joeyjoejoejr commented Feb 13, 2015

Can someone verify that this is still an issue?

KennethAshley commented Jun 19, 2015

Please upgrade to the newest version of Owl Carousel, released today, and re-open this issue if it persists.

rodrigoAbril commented Aug 18, 2015

I can still replicate this issue when calling from document.ready, if the call is made with window.load everything works.

greg5green commented Aug 18, 2015

You need to use $(window).load instead of $(document).ready if you want to use autoHeight with images. ready fires before images are loaded, so autoHeight is working as it should by setting the height to be 0 or 1 pixels tall. Another option would be to set up the carousel on ready , but trigger a refresh.owl.carousel on load so that the carousel knows to re-check the element’s height.

dallanlee commented Apr 28, 2016

This thread seems a little divided. Can anyone confirm that using $(window).load is the proper/best way to initiate the the owl slider with images and autoHeight? The autoHeight demo uses

Источник

Auto height not working #835

Comments

vdecree commented May 14, 2015

I’ve never needed it before, but I’m trying to get that autoHeight working and it’s not playing ball. I’m using version 2.0.0.

The stage is just keeping a fixed height, despite having 5 slides with different heights of content.

My script is simply:

The text was updated successfully, but these errors were encountered:

betagoo commented May 19, 2015

I have similar problem with autoHeight=true.
When slides are images, after page load slider height is set to 20px. I have to refresh page, then works fine.
But if browser cache is empty, autoHeight works wrong.
When I set autoHeight: false, everything works fine, but slider height is constant.

mikehdt commented Jun 25, 2015

From http://www.owlcarousel.owlgraphic.com/demos/autoheight.html
«The plan is to calculate all visible items and change height according to heighest item.»

From what I understand, this functionality is not yet currently implemented.

bgonz commented Jun 25, 2015

So is that the case — «autoHeight» is not quite ready yet?

austinhinderer commented Jul 10, 2015

According to the changelog, autoHeight has been fixed. Is this issue resolved?
http://owlcarousel.owlgraphic.com/docs/support-changelog.html

mikehdt commented Jul 13, 2015

That’s the docs for beta 2.4, which are outdated. The owner of the project has changed from OwlFonk to Smashing Boxes. As far as I’m aware does not have this functionality for multiple slides, only for single slides. There is a pre-beta-3 floating around however I’ve not had a chance to test it to see if this has works yet or not.

rezelute commented Jul 17, 2015

The autoHeight is buggy even when using single slides.
The autoHeight function seems to work with changed events but not with resized events. To overcome this i am having to change the stage height every time the browser is resized but then also on the changed events (When you resize the window and then navigate slides, bugs start to show).

owl.on(‘resized.owl.carousel’, function (event) <
setOwlHeight();
>)

owl.on(‘translated.owl.carousel’, function (event) <
//.
setOwlHeight();
>)

kashburn commented Aug 20, 2015

To fix the AutoHeight issue of not resizing on mobile orientation change I changed the /** All event handlers / section of the AutoHeight plugin to read:
/
* All event handlers.
* @Protected
* @type