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
Closed

autoHeight breaks on Safari #556

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

Comments

@ndimatteo
Copy link

@ndimatteo 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)

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
Copy link
Author

@ndimatteo 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:

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

Loading

@unostella
Copy link

@unostella 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.

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

Loading

@joeyjoejoejr
Copy link
Contributor

@joeyjoejoejr joeyjoejoejr commented Feb 13, 2015

Can someone verify that this is still an issue?

Loading

@seamofreality
Copy link

@seamofreality 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.

Loading

@lolsps
Copy link

@lolsps lolsps commented Jun 30, 2015

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

Loading

@fulopattila122
Copy link

@fulopattila122 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.

Loading

@subduer
Copy link

@subduer 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?

Loading

@Haprog
Copy link

@Haprog 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 <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.

Loading

@Haprog
Copy link

@Haprog 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.

Loading

@robertrhu
Copy link

@robertrhu 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

Loading

@pascalporedda
Copy link
Collaborator

@pascalporedda pascalporedda 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.

Loading

@gleenk
Copy link

@gleenk gleenk commented Jun 5, 2018

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

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
12 participants