When I click on a link using the shadowbox on an iphone (including the examples on the shadowbox site), the shadowbox appears at the top of the page and overlay only extends as far as the first screen. If I scroll down further, the overlay ends. This makes it difficult to use if I have a long page of material. If someone clicks on something at the bottom of the page, the shadowbox and overlay open at the top and users probably won't notice as the part of the page they are looking at will not change.
Does anyone have any insights on how to fix this or suggestions on where I should look in the code in order to extend the overlay to ensure the entire page is covered? It's fine the various desktop browsers. I figure iphone users can adapt and jump back up to the top of the page if need be to view the material, but there still needs to be some indication that the shadowbox has opened. I've tried editing the lines with #sb-overlay in the css, but didn't see any results.
it works on my side with a plugin in wordpress using thickbox but i've the same trouble as everyone here with shadowbox... So it doesn't come from the iPhone... I'm looking for an css issue, please anyone who could help will be more than welcome!
Sometimes, when the position of an element is set to fixed, it can create problems on the default Android browser. In my case, I have a mobile menu that is visible only when the visitor clicks on the menu icon. Displaying the mobile menu also adds an overlay.
If the overlay is using a fixed position , no matter what, on my Android device, as soon as I scroll down, the menu will close itself. If I replace the fixed position by an absolute one, the menu stays open when I scroll down.
This happens only the default Android browser, there is already an existing question on SO