Member Avatar for pjrey

hello
i am having issues with my website. i have been notified by several people using ipads, that they are unable to click any links, add themselves to the mailng list etc...

http://naniboujou.com

everything looks fine (design, layout etc..) but links are unclickable! form fields un fillable...

what gives?
thanks
pj

  • 4 Contributors
  • 5 Replies
  • 230 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

Quick summary anchored to the thread: the symptoms described by (links visible on desktop but unclickable on iPad; form fields not focusable) are classic iOS/Safari touch issues. They most often come from an invisible/transparent element sitting on top of the page, Mobile Safari’s “clickable element” heuristics, or CSS transforms/animations that change how touches are delivered. ’s test and ’s markup-check hint were on the right track — below is a focused debugging checklist and small test/fix snippets that have solved identical problems in other cases. (stackoverflow.com)

Quick debugging checklist (in order)

  1. Reproduce on a real iPad and attach Safari’s Web Inspector (Develop menu → device tab) to inspect DOM and event listeners. That immediately shows overlays and missing handlers. (aamnah.com)
  2. Visually reveal possible covering elements (temporary CSS). If an overlay is found, try lowering its z-index or temporarily disabling it.
  3. Test “pass-through” for overlays by toggling pointer events (see snippet below). If the page uses iframes, note that iOS can behave oddly and an iframe may still block clicks — a z-index change may be needed instead. (stackoverflow.com)
  4. If elements are visible but taps do nothing, make the element obviously interactive for Mobile Safari: add cursor: pointer or bind touch handlers / real onclick handlers. Also test disabling CSS transforms/animations on the parent — these have been known to break taps. (css-tricks.com)

Useful test/fix snippets

/* debug: highlight absolute/fixed elements */
*[style*="position: absolute"], *[style*="position: fixed"] {
  outline: 2px dashed rgba(255,0,0,0.2) !important;
  background: rgba(255,0,0,0.02) !important;
}

/* quick test to let taps through (test only) */
.overlay { pointer-events: none !important; }

/* make non-anchor elements behave as clickable on iOS */
.clickable { cursor: pointer; }

Notes and cautions

  • Apply the test CSS only temporarily. Pointer-event and z-index hacks can hide other problems.
  • For JS-heavy frameworks render timing can cause missed clicks; consider also handling touchstart/touchend politely if needed.
    This checklist covers the patterns that usually make desktop links work but break on iPad; it should point to the specific cause that found and let others diagnose similar cases quickly.

Recommended Answers

All 5 Replies

Member Avatar for Member #949455

i am having issues with my website. i have been notified by several people using ipads, that they are unable to click any links, add themselves to the mailng list etc...

What do you mean not clicking? It's working fine. I mean if the link is not clickable from the beginning, then no matter what system or browser you are using it won't click at all. What is the issue?

Member Avatar for JorgeM

Pjrey is correct. I tested from an ipad and the links arent working. A detailed look at the source code is needed.

Member Avatar for Member #949455

I notice you have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

on your top page.

Have you validate the pages in the w3c validator or html5 validator before you make it live?

By doing that it will tell you whether a certain code will work or not on the iPad.

Edited by Member #949455 because: grammer
Member Avatar for pjrey

yes, i did check.. i found out what was causing it. seems like i gotta do everthing around here

Member Avatar for pritaeas

By doing that it will tell you whether a certain code will work or not on the iPad.

Does it? It only shows if your markup validates against your selected doctype.

i found out what was causing it

Care to share?

Edited by pritaeas
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.