Wp-calypso: Components: Links in notices are not underlined in Safari

Created on 25 Mar 2016  Â·  4Comments  Â·  Source: Automattic/wp-calypso

Steps to reproduce

  1. Try to add a new domain to your site.
  2. Enter cnn.com in the search domain field.
  3. A notice should show up saying:

    cnn.com is taken.
    If you purchased cnn.com elsewhere, you can map it for €13.00.

  4. The map it part is the link that is missing the underline.

    What I expected

The link in the notice should have an underline

What happened instead

There's no underline

Browser / OS version

No underline on Safari 9.0.3
Underline on Chromium 48

Screenshot / Video

Chrome:
screen shot 2016-03-25 at 03 01 22
Safari:
screen shot 2016-03-25 at 03 08 11

As reported and investigated in https://github.com/Automattic/wp-calypso/pull/4171#issuecomment-199511804.
I've tracked down the bug to this hack, that's been introduced by @MichaelArestad waaaay back to ensure exactly one pixel thin underlines for links, regardless of the screen being Retina or not. However it looks like it's not working properly in Safari :)

Components [Type] Bug

All 4 comments

Hey, I just looked at this issue and found a small CSS style code will fix the problem.

.notice__text a[href] {
  text-decoration: underline;
}

Is there any blocker against this approach?

Thanks, that was my initial thought too. But from what I've gathered, apparently this hack has been introduced so that the line is exactly one pixel high on every type of display - normal and retina-like. text-decoration doesn't guarantee that. As to whether that is important or not... that's a question for our designers :wink:
In #4457, there's a nice and clean fix proposed, much simpler than the current hack.

Cool. I missed the PR. 😛

Fixed in f860d43. Props shaunandrews.

Tested and confirmed the fix with the following steps:

  1. Start at https://wordpress.com/domains/add and select a site if prompted
  2. Enter cnn.com in the search domain field
  3. Check to see if the map it link is underlined

Result: link is underlined as expected

screen shot 2016-06-28 at tue jun 28 1 25 50 pm
Seen at https://wordpress.com/domains/add/design5279.wordpress.com using Chrome 51.0.2704.84 on Mac OS X 10.11.5

Was this page helpful?
0 / 5 - 0 ratings