Floatbox 6.0.2 and iOS7 issue?

Page: 1

Author Post
Member
Registered: Mar 2009
Posts: 42
Location: UK
I have recently got an iPad Air with iOS7, and to my chagrin, I've found that any page of my site(s) that has floatbox.css and floatbox.js loaded, no longer allows iOS7 to action my CSS drop-down menubar. The top levels work where they have no dropdowns, and the dropdowns appear when tapped-on, but no action results from tapping on a sub-menu item. The same effect is apparent on my iPhone also with iOS7.

Some pages have XHTML 1.0 transitional Doctype and some HTML5 and all validate with one or two minor points I have no control over, such as in Facebook and Twitter widgets.

On pages that do not load floatbox, but 'include' the same CSS menu bar code, all the dropdown items work and action correctly.

Is this a known effect, and do I now need at add something to each menu action href to 'catch' the hover/tap for iOS? Firefox, IE, Chrome and Windows desktop Safari all work fine.

But why then is everything still OK when floatbox isn't loaded?

See: http://thebritishbeardclub.org/

Puzzled

Dave
Administrator
Registered: Aug 2008
Posts: 3382
Hi Dave,

I'm not sure we'll find a satisfactory answer for this one.

It is some obscure bug in Mobile Safari on iOS 7 and properly belongs in a bug report to the Safari team. But the triggering circumstances are so complex and obscure that it may not get any attention there.

I'm not in the habit of dismissing as a problem as being a browser bug and letting it go. In this case, I probably have to because there is no avenue of approach for determining the root cause.

Floatbox adds some event listeners to the document and these listeners are fired when the user interacts with your menu items. But they are only listeners that capture some info about what the user is doing. They do not modify, cancel or otherwise interfere with the events.

It would be interesting to remove the Twitter widget from the page and see how it behaves. I see the Twitter widget hooking a click handler into the window object, and this handler does have a conditional cancellation of the click event coded in. Although I can't see how the conditions for cancellation would be met by the menu links.

Sorry I don't have a resolution for you. This looks like an incompatibility between Floatbox and your menu system on one platform due to an internal bug on that platform. I can't remedy it in Floatbox. Maybe the menu system can be tweaked or a different one used. I wouldn't be shocked if a subsequent release of Mobile Safari suddenly starts behaving fine.

Cheers...
Member
Registered: Mar 2009
Posts: 42
Location: UK
Well, Byron, I can hardly believe this, but I have discovered that it's not really a Floatbox issue per se, but you might be interested to hear what I've found.

It's an iPad screen orientation issue! In Portrait mode, the menu doesn't work properly while Floatbox is loaded. In Landscape mode, everything is perfect on all pages with Fb running or not.

So now I have to investigate the 'viewport and orientation' meta tags or something to see if it can be sorted.

Anyway thanks as ever for your interest.
Dave
Member
Registered: Nov 2009
Posts: 22
The last post on this is just over a year ago, anyone know if floatbox and safari mobile are still having trouble getting along?
Administrator
Registered: Aug 2008
Posts: 3382
Floatbox and Safari mobile never did have trouble getting along. This is a "have you stopped beating your wife" kind of question.
Member
Registered: Mar 2009
Posts: 42
Location: UK
Just to clarify, @tstamplis, my problem is/was self-introduced by using a CSS menu layout that interacts with FB in a way that is entirely NOT of FB's making.

No disrespect was ever intended or implied to FB or BM.
Dave :oops:

Page: 1