Bug 77913 - -webkit-tap-highlight-color only highlights the image and not the surrounding anchor
Summary: -webkit-tap-highlight-color only highlights the image and not the surrounding...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-02-06 16:32 PST by powsankar
Modified: 2012-02-08 19:13 PST (History)
2 users (show)

See Also:


Attachments
Screenshot shows how tap highlight works when clicking on an IMG element which is placed inside an anchor with -webkit-tap-highlight-color (34.01 KB, image/png)
2012-02-06 16:32 PST, powsankar
no flags Details
Screenshot shows how tap highlight works when clicking on a DIV / SPAN element which is placed inside an anchor with -webkit-tap-highlight-color (49.77 KB, image/png)
2012-02-06 16:33 PST, powsankar
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description powsankar 2012-02-06 16:32:51 PST
Created attachment 125727 [details]
Screenshot shows how tap highlight works when clicking on an IMG element which is placed inside an anchor with -webkit-tap-highlight-color

For the tap effect we are using -webkit-tap-highlight-color for the anchor which includes three elements in our page :
a. IMG element - placeholder for product image
b. DIV element - placeholder for product label
c. SPAN element - placeholder for background-image

The highlight color works fine for both DIV with placeholder text/product label and SPAN with background-image. But then, when I click the image it only highlights the image area, not the complete anchor. In our page we assume all three elements (IMG, DIV and SPAN) as one single entity so we are expecting it to highlight the complete anchor instead of just highlighting the target element which is clicked inside the anchor. Problems are captured and attached as snapshot.

Also, it would be great if we got a pseudo class for anchor tap like a:hover. This helps to achieve dynamic effects easily. In this case, we can change the product label font color or the background image during the tab highlight.
Comment 1 powsankar 2012-02-06 16:33:15 PST
Created attachment 125728 [details]
Screenshot shows how tap highlight works when clicking on a DIV / SPAN element which is placed inside an anchor with -webkit-tap-highlight-color