How do you solve this Chrome button border bug?


Tags: html,css,google-chrome

Problem :

Anyone know how to get around this problem? I'm doing some custom button styling. It looks fine in Firefox:

Button as rendered by Firefox

But it doesn't look right in Chrome 15.0.874.106:

enter image description here

The top border has some dark pixels in the center of the button. They only show up when the button gets to be at least a certain width.

Here's the CSS:

.mybutton, .mybutton:visited {
  display: inline-block;
  padding: 5px 10px 6px;
  color: #fff;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative; 
  cursor: pointer;
  font-size: 13px; 
  font-weight: bold; 
  line-height: 1; 
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  background-color: #ccc;
}

.mybutton:active { 
  top: 1px; 
}
.mybutton:hover { 
  background-color: #aaa; 
  color: #fff; 
}

I've searched for other mentions of this problem but so far haven't found anything. Anyone else encounter this before?



Solution :

It appears to be this

border-bottom: 1px solid rgba(0,0,0,0.25);

that is causing the problem.

When I remove it, all is good... even with many words in the button.

Example: http://jsfiddle.net/kW3u4/2/

Tested on Chrome 15.0.874.106 on Windows


    CSS Howto..

    how to access the styles from CSS

    How to create the masonry effects with just bootstrap 3 grid system and css

    How to position a div so that it always appear 100px from top of the visible display

    how to apply css transition to background image

    How to set fixed base to calculate vh unit in css on mobile?

    How can I include CSS in php?

    How to remove the bottom border of a box with CSS

    how to give multiple colors in the same cell in a full calendar?

    How to remove underline in css for anchors pseudo element in IE

    How to apply CSS only to numbers in paragraph? (without )

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    How to add multiple css gradient as a multiple background?

    How to add css library to project generated with angular-cli@webpack

    How to add css loading animation in ajax beforeopen page

    Javascript: How to highlight some numbers or text within a line or paragraph?

    How center an absolute element (img) that's wider than its parent div?

    CSS - how to make responsive images

    How to unhecked parent checkbox

    CSS image rollover map and jQuery : how to use a second li list?

    how to make password textbox value visible when hover an icon

    How to get the type of the DOM element to fix the CSS Selector

    CSS: How to position divs 2 by 2

    How can I make this button image appear in Firefox 2.0 the same as it does in IE7?

    How to use absolute path of an image in css using jquery?

    How to make a back-to-top button using CSS and HTML only?

    How to use HTMLElement.classList(.toggle)?

    How load a table into multiple webpages using HTML?

    How to place 2 div side by side (alternative solution)

    How to menu on one line and always in center?

    How to create a vertical column in a table using css