2 Replies Latest reply: May 21, 2012 8:08 AM by purdyboy
purdyboy Level 1 Level 1

Creating a picture book; using the HTML widget for  interactivity...

 

Any object in the HTML that can be touched shows a semi-transparent dark box on top of the object/graphic when first touched. The box is the bounding rectangle of the object that has interactivity assigned to it.

 

This does not show up when viewing the content in a web browser; iBA seems to be adding this. Although not a show stopper, this takes away from the visual appeal of the content when interacting with it.

 

Anyone know of a way to disable this effect?

 

John


Mac OS X (10.7.2)
Solved by purdyboy on May 21, 2012 8:08 AM Solved

I found a solution to this; thought I would share...

 

What I was trying to "turn off" was the tap highlight color. It turns out that you can do this by changing a CSS property for the element you want to control. In my case, the element was the entire HTML container that housed my book.

 

The CSS is:

 

-webkit-tap-highlight-color: rgba(0,0,0,0);

 

This make the highlight color transparent and the net result is that you don't see any highlight on the bounding rectangle at all when you touch an object. Works great for my picture book!

 

For further detail, look here: http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Referenc e/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html

 

JP