Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Fix unrecognisable buttons when changing colours #377
When overwriting colours via browser settings, Firefox always defaults buttons to a transparent background and IE defaults to a grey background, irrespective of said settings. When changing Windows system settings to a high contrast theme, Edge also defaults buttons to a transparent background.
To make them appear a bit more button-y again, this adds a transparent outline which is invisible in normal browser settings.
Because Firefox always has black text on buttons, we actually have a completely invisible button on a dark background there. As far as I understand it, it's not fixable at all. I will file a bug report accordingly. Here is a reduced test case: http://jsbin.com/sibube
See also alphagov/govuk_elements#397.
Screenshots (form buttons)
Screenshots (link buttons)
referenced this pull request
Jan 30, 2017
I tried to test in iOS but didn't know how to focus via BrowserStack. Any idea how to do that?
As not a designer I just saw a 1px border with a weird artefact. But when @edwardhorsford looked at it, he saw that it was 2px on the right and on the bottom, so it looked more like there was a 1px white outline on top of the original 3px outline.
I added another example of Edge with colour changes via system settings to the description.
Regarding adding the bug report to the commit, the bug I reported was for something the commit doesn't fix (because it cannot be fixed). As such, I don't think it belongs into the commit messages. Or should I add to the message that this doesn't fix buttons in Firefox, which then can be linked to the bug report?
I was just trying to find a way to focus on the button in iOS devices via BrowerStack. The only way I've found is by using the dev tools and toggling the element state to "focus". I couldn't reproduce it in the few iDevices I tested. I then thought I would double check in a few OS X Safaris other than mine and couldn't reproduce it either.
And then I remembered that most people wouldn't see the focus style at all on buttons because it needs to be enabled in the browser or system settings (it's two settings but either would enable focussing on buttons). I guess that's also why we wouldn't see it within BrowserStack.
When I then tried to investigate further within my local Safari, it only showed the 1px border and artefact when I tabbed to the button, but not when I inspected it (and toggled the state to "focus"). :( I can play around a bit more with a few other CSS rules. But other than that, I'm not sure what other options we have to fix it.
It most probably is a Safari bug. My example is worse than yours, though, because of that artefact.
I played around a bit more with the CSS and found that the bug doesn't appear with default Safari buttons (which are used if you remove the border and background colour in your example; in our buttons that would also need removing of
I personally wouldn't mind having just a 1px outline, if it wasn't for that ugly artefact which just makes it look unprofessional. But then again, it only happens for people who changed their browser or system settings who tab to the button.
@edwardhorsford and me tried a couple of more things...
We tried to only set the new transparent outline when the button doesn't have any focus. But that didn't solve the issue in Safari at all.
Then Ed remembered he had solved issues with
I will update the commit accordingly and re-test a few things.