I developed a website which displays full webpages within a lightbox when certain images are clicked - the pages relate to the images. The pages are inside an IFRAME which is inside the lightbox's content div.
The problem is this: when the page inside the lightbox is longer than the height of the lightbox and the site is being viewed on iPhone/iPad, there appears to be no way to scroll the interior page - scrolling gestures scroll the outermost page (the one that the lightbox is overlaying). Mobile Safari has no scrollbars, depending entirely on gestures for scrolling, so the interior/overlayed lightbox IFRAME seems to be unscrollable.
Are there any solutions to this? Do I need to special-case mobile browsers and open a new browser window or navigate entirely to the IFRAME'd page instead of using the lightbox?
This seems to be a real shortcoming of mobile Safari!
(Not really relevant but perhaps useful info - the site is Drupal-based; the lightbox is the Lighbox2 module.)
While not addressing the pretty serious problem of unnoticeable content on mobile safari, I would like to mention you can usually scroll this kind of content with a two-fingered scroll/swipe.
As for your case, I would do a mobile browser detect and present the user with a new browser window.
Related
The entire screen flashes blue briefly with mobile chrome and hyperlinks using responsive.menu in wordpress. I'm looking to remove this effect.
You can reproduce the issue by using chrome and putting the browser in mobile mode. Navigate the browser to http://responsive.menu and use their menu on the right hand side, simply click the plus and minus arrows on the sub menu to demonstrate the effect.
Also, a screen shot and screen cast:
Shot:
https://drive.google.com/uc?export=download&id=0B-M6Yes83t08RjJ1T1IxU2JDTjg
Screen cast:
https://drive.google.com/uc?export=download&id=0B-M6Yes83t08cTRJbXNNTGdjcmM
From the author of the component:
it is due to the fact that for mobiles to detect a click event on the
body of the site without reverting to loading the jQuery mobile
library, I have added cursor: pointer; to the body.
This has the side effect of creating these blue flashes on mobile
Chrome as the browser now thinks that the whole body is a link. The
quickest option is to turn off the "Click to close menu on body
clicks" option while I see if there is a workaround in the long term.
The only way around this I can think of is to load jQuery mobile
separately, but I was always reluctant to do this.
Question update:
This only happens on chrome mobile - how do you emulate safari and firefox mobile behavior?
I've just finished a website which is layering a webpage over an iframe. Everything is working fine on an Internet browser, yet on mobile when trying to scroll the background (the iframe, the content) it only scrolls the frontal fixed web icons. Is there anyway around this?
Specifically I thought if I could implement a non scrolling function on the front page it then scroll appropriately on the back page.
Does this sound like a feasible solution. If so could anyone assist in how to implement this?
thanks
When opening the main menu (hamburger icon top right) of my page (password = "shooga1") on a smartphone, menu items are not there - menu is empty. Opening the same menu on desktop, after reducing browser window to make it narrow like on a smartphone, the exact same menu works normally.
This problem occurs regardless of which mobile browser or desktop browser is used. Pretty puzzling, any suggestion as to what is the problem or how to solve it would be appreciated.
I think the problem is that the mobile menu is empty.
In your website, there is an object's id called mobile-menu, and when users use the mobile phone to check the menu, this area will become visible.
(Normally it's invisible. When you touch the icon on the top-right side, it will become visible.)
But I can not see any code in this area. That means you designed the menu for desktop only and you maybe need to design the menu for mobile, too.
It's up to the framework you use. Maybe there are some methods that can be used to let the menu for mobile be the same as the menu for desktop.
I have a wordpress ng gallery template: http://bit.ly/LTJ9ee, the lightbox of which behaves oddly in chrome when a video is embedded on the same page. The problems only occur when:
Using chrome (v23). Tested on all other major browsers (windows 7) with no problems.
If the page is too big for the viewport (has scrollbars)
There is an embedded video in the page, and the video has already been started (same problems occur whether html5 or flash)
If you look at the page here: http://bit.ly/123NW1C, what seems to be happening is that under the above conditions only, the lightbox is not moving to fit the viewport as it should. This makes parts of it display twice and parts of it not display at all. Web inspector says the divs are positioned correctly, but 'as seen' they are not.
I'm currently stumped on this. The wmode fix didn't help, nor did anything else I found online. Any ideas on what this is likely to be? A bug in chrome? Or something about the way this lightbox interacts with an embedded video.
I have a series of scrollable divs on a page. When a DIV gets scrolled to say the top and the user keeps scrolling it starts to scroll the page up instead (not so much on Firefox) but on Safari and Chrome it does.
This is annoying, and I notices that on Facebook, the activity monitor, friends online and chat window do not do this. If your mouse is in the div the you can only scroll that div not the page when you reach the top or bottom.
How have they done this?
Marvellous
Facebook use a custom scrollbar instead of those that come with the browser (at least, for the friends online sidebar).
Custom made controller = custome made control. :)