I have searched around and have not been able to find others having this issue so I wanted to create a case to see if anyone else was encountering this.

I am currently using the latest Drupal Colorbox version along with Colorbox 1.3.20.1 and mobile devices (iPhone and iPad) are rendering as they should be.

However as soon as I upgrade to any newer version of Colorbox all overlays are fixed to the top left of the mobile browser and the size is incorrect, rendering the colorbox unusable.

If anyone has any suggestions/fixes or can even confirm this that would be great.

Comments

frjo’s picture

Category: feature » support
Status: Active » Postponed (maintainer needs more info)

I'm using v1.3.34 on my own blog at http://xdeb.org/blog/frjo and I just confirmed that the Colorbox works as it should on a iPhone for the site.

Do you have an link to a site where you have this problem?

glynster’s picture

I removed it from the production site I upgraded the colorbox to so at the moment there is no other site. However I notice on our site you are not using any animation to open the overlay, I wonder if that helps the colorbox. Also you have a mobile theme setup too, this could very well be helping too. If you disabled the mobile theme does the colorbox still respond as it should?

frjo’s picture

I use the stock Colorbox module with the new plain style on my site. Nor really a mobile theme, my theme have a responsive design so the CSS change depending on windows/screen with.

vchen’s picture

I have no issues with displaying colorbox on iPads. I just upgraded to colorbox 7.x-2.3 (with upgrade from the original colorbox plugin in the libraries folder and upgrade from libraries API 7.x-1.0 to 7.x-2.0).

Everything seems to work as normal. Although, I had to override the new HTML5 button element style to border:none to get rid of the ugly defualt button styling by browsers.

glynster’s picture

Dam OK well I guess there is something else at play here for my theme. Good to know you guys are having luck. I have seen the theming override needed as well as a border around the colorbox too. I will keep testing.

frjo’s picture

Status: Postponed (maintainer needs more info) » Fixed
Dmitri2012’s picture

Hi Guys!

I have a problem with colorbox and mobile devices. I bought a responsive drupal template(theme). The template works well on pc but when I view the website from Iphone using Safari browser or Google Chrome colorbox does not work. When I click on the image nothing happens. On Samsung mini using standard android browser the image opens but on top of the page so if the user is somewhere in the bottom he even won't notice that the image has opened. As I understand it when I scroll the page the image should stay on the screen because colorbox has position: fixed. But it stays on top of the page. Corobox module 7.x-1.5, Libraries module 7.x-1.0 and Libraries 1.3.17 are used.
What I did is I have installed all the latest modules Colorbox 7.x-2.3, Libraries module 7.x-2.0 and Lates libraries(the link "Download Colorbox plugin 1.x" on colorbox page ). Now in Iphone using Safari colorbox only works if I click on the image twice. In Samsung mini the image appears on top of the page but the viewing area also moves to the top of the page so I can see that the image has opened. But it still stays on top of the page so position: fixed seems not working.
Here is the link to my website:
http://dmitri.hostingsiteforfree.com/peter3/?q=sv/designportfolio

Please help!

Dmitri2012’s picture

I am not 100% sure but it seems that colorbox does not get the actual size of the page.

Peter Buchanan’s picture

I have the same problem, if you look at www.thinkgov.co.uk/TT/ss13 the problem is present (colorbox 7.x-2.3 and colorbox libraries 1.4.3. To get to a correctly working site go to teijaeilola.com/ss13 (which is on an earlier colorbox 7.x-2.0 and colorbox libraries (1.3.20.1) release). Click on any image and the problem is obvious.

Why has this been set as fixed? I've given links to illustrate the problem.

glynster’s picture

OK so more people are experiencing the same issue. Have any of you been able to identify any JS errors?

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

glynster’s picture

Status: Closed (fixed) » Active

Did this every get resolved? I see no evidence it did?

szy’s picture

Issue summary: View changes

And now it's me having the same problem. The site is build on Zen subtheme.

There is no reaction in mobile devices. Desktop browsers work fine. There is problem with Colorbox, Fancybox, Photobox... So, that's not lightbox' specific thing.

How have you made it, guys?

Szy.

natigiat’s picture

Issue tags: +colorbox fix issu

hello,
you can go to colorbox
js/colorbox.js

and comment the matchMedia function (the secound function)

its will fix your prublem

aramboyajyan’s picture

To everyone who is facing the same issue - there is a "Mobile detection" setting on admin/config/media/colorbox where you can enable/disable colorbox on small screens.

By default it's ON, meaning colorbox will not work for screens smaller than 480px.

Hope this helps.

criscom’s picture

You are a champ topsitemakers. That solved my problem. Thanks.

frjo’s picture

Status: Active » Closed (works as designed)
sumit-k’s picture

Thanks it works.

oranges13’s picture

The solution in #15 fixed this for me THANK YOU - I was tearing out my hair trying to figure out why it wasn't working.

xaa’s picture

#14 seems still required for colorbox on ios

Will Kirchheimer’s picture

#15 solved it for me as well

hmartens’s picture

Thank you so much for taking the time to answer. #15 worked for me. I cannot think that this should ever be default behaviour unless you're still living in 2006. Colorbox should always work on mobile...that should be the default.

codechefmarc’s picture

#15 solved my issue too, thanks!

hodba’s picture

Thank you for your answer. just disabled the option and all is fine.

HongPong’s picture

Setting the maxWidth attribute for colorbox to a value like "95%" solved my problem in this area.

Sherydan’s picture

Mine wasn't working on mobile and I was considering leaving drupal and go for acounting until #15 saved me.

Drupal 8

danex’s picture

@aramboyajyan Many thanks to your answer #15, this saved me a lot of time! I have registered on drupal.org just to thank you. Wishing you all the best :)

gijshvg’s picture

Thank you! Changing the option on /admin/config/media/colorbox helped!

alienzed’s picture

Unless someone has also complained that Colorbox works on mobile (yes you read that right), maybe the default should be off? I mean, who develops a site and just ASSUMES that it won't work on mobile? Seems like something you should have to turn on. Should I submit a patch?

oranges13’s picture

I would honestly say no, but perhaps the documentation should be clarified to this settings effect.

Navigating a color box on a small mobile device is difficult. While some site owners wish that functionality for themselves, linking directly to an image on mobile browsers provides better usability.

I vote to leave as is (with clarified documentation) unless there's a massive consensus to the contrary.

alienzed’s picture

I respect your opinion and in the case of an image, that makes sense because there's an acceptable fallback. With that said, you are making the assumption that the colorbox has an image in it. In my case it was an inline html colorbox. The fact that these were essentially disabled on mobile completely broke the functionality. People on desktop got to see a new overlay div pop up with tons of content, whereas on mobile tapping the link would just scroll to the top of the page because of the anchor link.

LemonHardos’s picture

#15 Hero since 2015
Thanks (one more ;)

Shifali Baghel’s picture

Solution #15 worked for me in Drupal 8.

Many thanks @aramboyajyan

auxiliaryjoel’s picture

#14 fixed it for me (although I also did #15 first so maybe it was a combination of both)