We're experiencing an issue with an iframe lightbox that occurs mostly on iPad's. The issue is sporadic, sometimes we can get it to scroll, other times it cannot scroll at all.
Here is a live example: http://story-teller-doreen-61750.bitballoon.com/
View this on an iPad, iPad Air, or iPad Pro using safari.
You'll notice that on the iPad, the background with the content scrolls, but the iframe does not scroll. However, sometimes when you change the orientation from portrait to landscape then back, the scrolling then works.
Is there a known solution to this issue? We've already attempted to try all the workarounds posted in various threads on stackoverflow and github with others experiencing this issue using bootstrap modals, but have not had any luck.
Related
We have a website whose background is a stack of images through which we go with JavaScript.
We check whether the next image is loaded before switching to it, and it works fine on Chrome, Safari, IE, and all mobile browsers, however on Firefox we sometimes get a white flash.
This problem also happens if we make sure that all the images are preloaded so it's not a problem that FF shows the image before it has finished loading. I've seen the question asked elsewhere but from the user's perspective, and the solution was to disable hardware graphics acceleration, which does not solve completely the problem but reduces it. However we obviously can't ask that from our users.
Similar problems were reported in other questions:
jquery animate (height) causes background-image flickering in firefox
Image Flickering only in Firefox
Firefox background image flickering when using multiple instances and background-size
skrollr background image flicker in Firefox
However none has a clear solution. Does anyone know how to correct for this?
Cheers!
I'm working on a some-what basic site, but have an issue we can't seem to get passed. (site not complete)
It's a horizontal size, laid out using fullPage.js.
https://github.com/alvarotrigo/fullPage.js/
When you click the Sign up button in the top right corner, the slide container scrolls all the way left, displaying an iframe, loaded with a CRM.
We're using a callback in the fullPage plugin to know when a user has scrolled to that page. When the page with the iframe is loaded, a script runs to resize the height of the iframe to the available screen-estate ( win height - header & footer ).
Problem is, scrolling doesn't work on Iphone. Works fine on desktop.
Can't seem to figure out what's going on. Have read up on scrolling in iframes on iOS devices, but haven't stumbled upon a viable solution.
url: go-combine.com
Thank you in advance for your help.
I am using http://alvarotrigo.com/fullPage to create a simple one page website. Everything is perfect except on iPhone when in landscape mode - when I scroll, instead of the page staying full screen and moving to the next anchor, safari reveals address bar & bottom nav causing content to scale in height.
Can anyone help please?
The problem is not that the bars are revealed, but that they hide when orientation changes. This is a iOS 7 behavior which may not be the same in other phone OS.
At this moment developers don't have control over this behavior of Safari over iOS 7.
The bug has been already reported in the github respotitory of fullpage.js but I'm afraid no solution has been found for it yet:
https://github.com/alvarotrigo/fullPage.js/issues/79
On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.
Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.
In my web application I frequently have sections that need to be collapsed/expanded. I do this with jQuery using the slideDown() and slideUp() methods. They work great. However, in Firefox, if I am scrolled all the way to the bottom of the screen and I collapse a div the screen stutters and flashes as the div disappears and the page is automatically resized by the loss of the element.
Has anyone run into this problem before? I've been working around it by setting a min-height with a generous amount of space for any section that will be collapsible but this seems like an unnecessary solution. Chrome doesn't have this problem and, amazingly, neither does Internet Explorer, both of which smoothly resize the page without any sort of stutter or flashing.
I'm using Firefox 3.6 on Ubuntu and I've experienced this problem on earlier versions as well. I have not tested on Firefox 4.
I have ran into this problem before and yes. I have worked around this by setting a mini-height or consider not using a slide effect.