Topic List - Mobile View - Link hover highlight bleed to other topics


(lid) #1

I have noticed on mobile device (nexus 4 / chrome) when I tap on a topic item.
there is an hover highlight that shows the area of the clickable area.

The issue is that highlight area bleed in an ugly way to other topic lines.

I don’t have a mobile snapshot but I have identified a potential cause debugging on chrome

Removing the padding doesn’t seem to make any visual change.



(Jeff Atwood) #2

The padding is there so the tap target is larger. Removing the padding means you would have to directly tap on the letters of the words in the title.


(lid) #3

So it is intentional.

With current implementation I will recommend to at least reduce the top padding not to bleed out of it’s list item container.

I think it will still achieve the same intended behavior.


(Michael Downey) #4

Is it possible that this new padding change could be limited to the mobile CSS only? This change causes WCAG-compliant link hover colors now to look rather strange on desktop:


(lid) #5

my recommendation is targeted at mobile view

What do you use to get the WCAG highlight on desktop?


(Michael Downey) #6

Just a custom line of CSS. Per WCAG, the color used depends on the background so enough contrast is achieved.

 a:hover{background-color:#e5f6ff;text-decoration:underline;}

(Gerhard Schlager) #7

I’m not seeing anything like this on my Nexus 5 / Chrome. Did you enable something in order to see the clickable area?


(lid) #8

I suppose it might be related to the version of chrome I am using 29

Testing on chrome beta they are actually rendering the highlight to the size of the text :thumbsup: and still make the padded area clickable.

basically you get the blue highlight on any link when your finger actually touch a link.