Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

autoHeight breaks on Safari #556

Closed
ndimatteo opened this issue Oct 14, 2014 · 12 comments

Comments

@ndimatteo
Copy link

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)

You can see an example of it happening here: http://dev.yarmouth.nickdimatteo.com/listing/633-maryland-ave-ne/

and here's a screenshot:

ERROR CORRECT
error correct
@ndimatteo

This comment has been minimized.

Copy link
Author

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:

onInitialized: function() {
    $('.slider').trigger('refresh.owl.carousel')
}
@unostella

This comment has been minimized.

Copy link

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.

//wait for images
$(window).load(function() {
    owl(); //run owl gallery
});
@joeyjoejoejr

This comment has been minimized.

Copy link
Contributor

commented Feb 13, 2015

Can someone verify that this is still an issue?

@joeyjoejoejr joeyjoejoejr added the bug label Feb 13, 2015

@seamofreality

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Jun 30, 2015

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

@fulopattila122

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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 <img> in the carousel:

<img src="..." alt="" onload="if ($(this).closest('.owl-height').height() === 1) { $(this).closest('.owl-carousel').trigger('refresh.owl.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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

@pascalporedda

This comment has been minimized.

Copy link
Collaborator

commented Feb 24, 2018

It took a while, though I've merged a PR proposing a change related to this issue. Have been testing this out with a slow network connection and wasn't able to reproduce the 1px behaviour.

The fix will be in the next release. If you still encounter this issue feel free to reply to me.

@gleenk

This comment has been minimized.

Copy link

commented Jun 5, 2018

This bug is still present on 2.2.1 version but solved on 2.3.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.