We have an interesting bug that only seems to appear, when views caching is enabled (so I think that's the point where to search for the reasons). We could reproduce the problem on several pages, so it definitely seems to be a general problem and it doesn't seem to be a library issue. To be sure I've posted the issue here, too: https://github.com/OwlFonk/OwlCarousel/issues/366 (you can also get the Exports of our configuration there for reproduction).
Problem: When there are several sliders on the same page and views caching is enabled for at least one of them, the whole page crashes on some mobile devices.
Context: On mobile devices (iOS crashes completely on Chrome and Safari, Android browsers also crash SOMETIMES).
Export of the two sliders where the crash happens when views caching is enabled:
{"items":4,"itemsDesktop":["1199","4"],"itemsDesktopSmall":["979","3"],"itemsTablet":["768","2"],"itemsTabletSmall":["479","1"],"itemsMobile":["479","1"],"singleItem":false,"itemsScaleUp":false,"slideSpeed":200,"paginationSpeed":800,"rewindSpeed":1000,"autoPlay":false,"stopOnHover":true,"navigation":true,"navigationText":["prev","next"],"rewindNav":true,"scrollPerPage":true,"pagination":false,"paginationNumbers":false,"responsive":true,"responsiveRefreshRate":2000,"baseClass":"owl-carousel","theme":"owl-theme","lazyLoad":true,"lazyFollow":false,"lazyEffect":"fadeIn","autoHeight":false,"jsonPath":false,"jsonSuccess":false,"dragBeforeAnimFinish":true,"mouseDrag":true,"touchDrag":true,"addClassActive":false,"transitionStyle":false}
{"items":1,"itemsDesktop":["0","1"],"itemsDesktopSmall":["0","1"],"itemsTablet":["0","1"],"itemsTabletSmall":["0","1"],"itemsMobile":["0","1"],"singleItem":true,"itemsScaleUp":false,"slideSpeed":200,"paginationSpeed":800,"rewindSpeed":1000,"autoPlay":"5000","stopOnHover":true,"navigation":true,"navigationText":["prev","next"],"rewindNav":true,"scrollPerPage":false,"pagination":true,"paginationNumbers":false,"responsive":true,"responsiveRefreshRate":2000,"baseClass":"owl-carousel","theme":"owl-theme","lazyLoad":true,"lazyFollow":true,"lazyEffect":"fadeIn","autoHeight":false,"jsonPath":false,"jsonSuccess":false,"dragBeforeAnimFinish":true,"mouseDrag":true,"touchDrag":true,"addClassActive":false,"transitionStyle":false}
Temporary fix: Disable views caching!
Possible reason: I think there is a problem with views output caching, but initially both sliders work, then the crash happens after some seconds.
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | owl-carousel-crash-2328369-7.patch | 1.79 KB | Derimagia |
Comments
Comment #1
anybodyComment #2
anybodyAdditional information: As I just found out the problem also occurs with views caching disabled and AUTO PLAY set to any value (in our case one slider has "5000" and the other has "2000" as value).
Setting up the priority because the browser crashes completely (without remark for a long period of time in the worst case).
Comment #3
swim commentedAghh just lost my reply xD, these gateway 504 suck.
Anyway; I have seen this bug before however have not been able to reproduce it. From my experience it can be triggered after leaving the browser open on a carousel page for a long period of time. This screams library issue however I won't make that assumption just yet.
Would you mind testing a different 1.x version for me? I'm going to backport the themeing changes made in 2.x as it fixes a number of other issues as well.
Comment #4
anybodyThanks a lot for your reply! Should I try the latest .dev? Have you already backported the changes?
Comment #5
swim commentedSorry this took so long, the latest dev now has been updated with the new theme implementation; hopefully this should help with caching support.
Comment #6
thomas.frobieterIt seems its not an problem to iOS only. It's also not about the user agent string / mobile detection, it's enough to lower the width of the browser window
But, in this case here.. it has nothing to do with the views cache. Disabled both (content based cache in the view itself and /admin/structure/views/settings/advanced -> Data caching) still crashing. AND theres only one slide here.
@swim: How can i help you figure this out? I can reproduce it.
Comment #7
Derimagia commentedI ran into this same issue and I believe it's related to Issue 2212711. You can see some people there say they were having crashes. I don't believe it has anything to do with caching.
Essentially for responsive breakpoints the number of items was still a string and not cast to an integer, which was used to scroll the page. Adding strings in javascript caused issues.
I attached a patch to fix this.
Comment #8
Derimagia commentedComment #9
anybodyHere's the problem in OwlCarousel: https://github.com/OwlFonk/OwlCarousel/issues/366#issuecomment-71215721
Can someone confirm that these two belong together?
The fix I've posted on Github may also help as quickfix for you. But we should be sure to have found the reason.
Comment #10
Derimagia commentedYeah from the look of that bug, it's the same issue and the issue is with the module sending strings to OwlCarousel for the responsive breakpoints "number of items" variable instead of ints.
This is the line on OwlCarousel that expects items to be a number:
https://github.com/OwlFonk/OwlCarousel/blob/4460c16a26b1bba1309b672c8c7c...
And this is where the items is overwritten depending on the breakpoints:
https://github.com/OwlFonk/OwlCarousel/blob/4460c16a26b1bba1309b672c8c7c...
Comment #12
swim commentedThanks to everyone who has contributed time to this issue; specifically Derimagia & Anybody. Patch looks good and addresses the issue described in the context "On mobile devices" which was missing the correct type cast on items.
Comment #14
Paul89 commentedThanks for the patch, works great.