CODEWITHSUNDEEP
htmlioscssiframecross-browser
Neil S3ntence
Neil S3ntence

Reputation: 194

elements display incorrectly on tablet browsers

I'm currently working on one of my first two projects and you can tell that I'm still at the beginning of my youtube-tutorials-&-SO-powered learning journey:

our neighbor's skin & beauty spa

Please don't be too harsh on my code :D I've hand-written everything from scratch in a little editor.

In short, everything seems to work A-OK on desktop computers (I tested FF and Chrome), but on the iPad and other tablets I'm experiencing nasty bugs - I'm having major trouble with two issues:

  1. the Google Maps iframe is always visible (overlaps other sections) on tablets even if the corresponding section isn't clicked on in the menu, and I have no idea why! It seems that the visibility:hidden on a position-fixed element isn't interpreted correctly?

  2. :focus works on the image gallery 'sneak peak', but in the services section, the 4 sub-content areas are inaccessible.

  3. (Unrelated?) When the page loads on my iPad (mini) the #logo_box div appears at page load, but turns semi-transparent the very instant as the map iframe appears.

EFFORT1: I removed the Google maps iframe-containing 'content' container altogether, and suddenly the :hover on the other content sections stopped working as well. This might be an indicator that something is 'linked' in a way that's not right...

EFFORT2: I assumed that the < label> is the culprit, but I can't pinpoint it. I tried this suggested solution, but it's for IOS4 (2011), and as Rob Fletcher commented last Feb., it doesn't work on IOS7.

EFFORT3: I feel that the .content div's {visibility:hidden/visible;} is causing trouble in the android mobile browser: input:checked hides instead of reveals the particular section while all others show.

Btw, how do I friggin' trouble-shoot tablets? I don't have any dev tool on ipad & android browsers.

Help is much appreciated!!

Upvotes: 0

Views: 104

Answers (1)

CupawnTae
CupawnTae

Reputation: 14590

On iPad, you can go into the Settings App, then go Safari -> Advanced -> Web Inspector.

Then plug it into your Mac via USB and open Desktop Safari on the Mac. If you haven't already enabled the Develop menu, go Safari -> Preferences -> Advanced -> Show Develop Menu.

Then when you open a web page in Safari on the iPad, you can connect to it via the Develop menu on your Mac's Safari and use the web inspector.

If you're using Chrome on Android you can use remote debugging https://developer.chrome.com/devtools/docs/remote-debugging

Weinre provides similar functionality across more platforms (including Android native browser), but is a bit more involved to set up.

Upvotes: 1

Related Questions