Strange CSS3 Button

Question

My CSS3 buttons do not display correctly in certain use cases. In FF and Safari, they display perfectly, but in Chrome the left border becomes thicker, and when you hover over them, the fill color does not fill 100% of the area. See a working example: http://jsfiddle.net/3x4zc8tq/3/ How to fix it?

/* @group Center all the things */

.center-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

    .center-wrapper .center {
        position: relative;
        overflow: hidden;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);


       /* This fixes the blurred buttons but breaks centering

       -webkit-backface-visibility: hidden;
               backface-visibility: hidden;

       transform: translateZ(0);*/
     }

/* @end */

Tried and tested methods like below do not work for me:

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
transform: translateZ(0);

Answer 1

This is an incredibly strange problem for me, but it seems like, like most other commentators, this is really a Chrome issue.

, max-width , . , , , , , , . : http://jsfiddle.net/3x4zc8tq/11/

Google ...

Answer 2

CSS .btn::before

.btn::before {
    left:-1px;
    width:101%;
}

http://jsfiddle.net/3x4zc8tq/6/

Answer 3

overflow: hidden .btn overflow: auto. overflow: hidden , . . :

": " div div webkit

: Chrome Safari

Answer 4

, text-align: center block.

, :

.btn, .btn:visited, input.wpcf7-submit {
    display: inline-block;
}

with

.btn, .btn:visited, input.wpcf7-submit {
    display: inline-table;
}

fiddle

, .

Answer 5

-, crhome.

"" ( ), ::before opacity:0 hover::before, opacity:1.

The problem with a black background not filling the full width seems to me an error related to using transform: translateZ(0);AND z-index:1in the same class. If you remove both, it will fix, but you will lose some of your effects ... but maybe you can try another way to do the same.