I am working on a website that needs to be mobile-friendly. With the release of iOS 7, I wanted to achieve a depth and blurry effect. I used an iframe with a CSS3 filter applied to it and made it scroll along with the page using jQuery. Everything looks good on a computer, but when testing on a mobile device (iPhone iOS 6 with Safari), I noticed that the iframe only scrolls after I finish scrolling. Is there a way to make it move while I'm scrolling, not just after?
Here is the code snippet I am currently using:
$(function () {
$(window).scroll(function (e) {
var t = $(window).scrollTop();
$('#blur').contents().find('body').scrollTop(t);
});
});
For reference, here is an example: http://jsfiddle.net/X5ZbH/.
Thank you.