Colorbox content doesn't scroll on mobile safari

Question

Good evening,
I created a website using a thick window where it displays a calendar, and one of the problems that appeared on the screen is content that will not be displayed in browsers like the iPhone. I tried updating it in colorbox and see if this problem is fixed, and it is not.

How to force a mobile browser to allow content scrolling?

Here is the page I used to try to understand the problem: http://hsr-bsa.org/test/test.php

Thanks,
Mike

Answer 1

Thanks to Jack Moore, the colorbox css file has been updated to solve this problem:

#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} 

Changing your stylesheet using the webkit overflow rule should do the trick. No need to update any javascript function.

Source: https://github.com/jackmoore/colorbox/commit/ca4e63c71cf1ec00fb3340f2e1a0a5512cbc8f0a

Answer 2

This seems to be a limitation of the mobile version of Webkit.

This page claims that you can get around it with two finger scrolling in regions with overflow: a scroll set. I could not try it myself, although I was not able to take over ipad to test it.

Answer 3

If anyone happens on this answer question, see my answer on this very question in another thread. Note that you need to manage the contents of the iframe, i.e. in the same domain.

Answer 4

This work is good for me.

 <script> var devicetype = '<?php echo $devicetype; ?>';// get ur divice type variable if(devicetype == 'mobile'){ setTimeout(function () { var startY = 0; var startX = 0; var b = document.body; b.addEventListener('touchstart', function (event) { startY = event.targetTouches[0].screenY; startX = event.targetTouches[0].screenX; }); b.addEventListener('touchmove', function (event) { event.preventDefault(); var posy = event.targetTouches[0].screenY; var h = parent.document.getElementById("cboxLoadedContent"); var sty = h.scrollTop; var posx = event.targetTouches[0].screenX; var stx = h.scrollLeft; h.scrollTop = sty - (posy - startY); h.scrollLeft = stx - (posx - startX); startY = posy; startX = posx; }); }, 1000); } </script>