Menu
(NOTE: Updates 1-5 below)
I have a Twitter-Bootstrap based responsive web page, and the top-left corner of the page has a rectangular-shaped zone which is completely dead, but only on Mobile Safari (I haven't tested on Android).
Dead, defined:
I added the following code:
$('*').click(function(){
console.log($(this));
});
... and when I activated the mobile safari JS console, I noticed that the dead zone had become shifted up equal to the pixel height of the console strip!. Ie., the dead zone had shrunk. Furthermore, the console logged all clicks except for those performed in the dead zone.
UPDATE #1:
Per advice from the comments I...
1) Double-checked fixed-positioned elements:
$('*').click(function() {
console.log('checking for fixed elements...');
$('*').each(function() {
if ($(this).css('position') == 'fixed') {
console.log($(this));
}
})
});
... it turned out my Bootstrap modal dialogs were all fixed position in mobile. I removed all of the dialogs and the problem persisted.
2) Added the following CSS code....
* { outline: 1px solid red; }
Here is the iPhone screenshot. (The blue box I added afterwards in photoshop to approximate the dead zone)...
UPDATE #2: OK, this is ridiculous. I started stripping stuff out of my code.This what I ended up with, and the problem persists!...
<html>
<head>
</head>
<body>
</body>
</html>
UPDATE #3: This is likely a safari bug and has nothing to do with my webpage. (see update #2 below). I force-closed safari and when reopened the problem disappeared.
UPDATE #4: The problem reappeared :( Maybe it is my web page after all and not a safari fluke. However, it seems to happen randomly... Force-closing the browser will fix it for a while until it comes back again.
UPDATE #5: Once the dead zone appears, after navigating to another web page the dead zone is still there.
744
There are only about a million possibilities to this issue. I would start by plugging your device into your computer and opening Safari. make sure Develop mode is turned on in your preferences. From the develop menu select your device, and inspect the elements. It's amazing what you'll be able to find. Start by adding "display:none" to each element until you find what your problem is.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
