4

My CSS3 buttons aren't displaying correctly in certain use cases. In FF & Safari they display fine but in Chrome the left hand border is thicker and when you hover over them, the fill colour doesn't fill 100% of the area. See a working example: http://jsfiddle.net/3x4zc8tq/3/ How can I 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 such as below do not work for me:

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
transform: translateZ(0);
egr103
  • 3,858
  • 15
  • 68
  • 119

5 Answers5

1

You could try adding this to your CSS rule for .btn::before

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

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

Lee
  • 4,187
  • 6
  • 25
  • 71
  • How can it cause the problem for you in Chrome? There's no way it can cause the problem described, it's entirely the opposite. – Lee May 22 '15 at 12:11
  • Doesn't appear to cause me a problem in IE or Chrome, please unvote. – Lee May 22 '15 at 12:13
  • Added compensation for that. – Lee May 22 '15 at 12:14
  • I can't see how it can work for some of us, but not others, and some of us don't see the original issue at all, where some do... – Lee May 22 '15 at 12:18
  • This fixes the left border issue but I still see the hover issue in that it still doesn't fill 100% of the button – egr103 May 22 '15 at 13:00
  • It does if you increase the width like I added, worked fine across my multiple browsers – Lee May 22 '15 at 13:02
  • Interestingly, after checking your fiddle, it appears the buttons look and work fine for the bottom 2 blocks but the hover issue is still present for the vertically centred (pink) block. – egr103 May 22 '15 at 13:25
  • Then I'd maybe look at other's suggestions, and look at other bits in your code, because it sounds like there's something that's really screwing things up. This issue seems to be far too flaky and inconsistent for it to be easily solved. – Lee May 22 '15 at 13:26
0

Change your overflow: hidden of you anchor element on .btn to overflow: auto. overflow: hidden seems to add some margin. See more here:

Margin behavior of "overflow:hidden" div after floating div on webkit

Overflow:hidden messing with margins in Chrome and Safari

Community
  • 1
  • 1
appostolis
  • 2,294
  • 2
  • 13
  • 15
  • I can't see any changes to your answer, unless I'm missing something?! highly likely :-| – egr103 May 22 '15 at 13:14
  • Lol, sorry my browser stuck! investigating and updating soon. – appostolis May 22 '15 at 13:23
  • Thats removed both issues with the border and hover, however in FF (and I'd assume IE) scrollbars now appear when you hover over the buttons...so very close – egr103 May 22 '15 at 13:42
  • what if instead of `overflow: auto` you put `overflow-x: auto; overflow-y: hidden;` (on .btn class) . try that. – appostolis May 22 '15 at 13:55
  • Bugger. See http://jsfiddle.net/3x4zc8tq/10/ The border is fixed but the hover is still the problem after implementing overflow-x: auto; overflow-y: hidden; – egr103 May 22 '15 at 13:59
  • really? it does seem to work for me. Tried Chrome, FF and FF Dev Edition. Not tested in IE though. – appostolis May 22 '15 at 14:30
  • 1
    After some resizing of the browser, it appears that its a Chrome percentage problem as what other commenters have said. Some widths work others do not. – egr103 May 22 '15 at 14:35
0

It seems that your issue is caused by the text-align: center property on your block element.

You can fix this issue by replacing:

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

with

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

Here is a demo fiddle

Let me know if this is causing issues in other browsers

Razvan B.
  • 6,721
  • 2
  • 19
  • 32
0

First at all this is clearly a crhome bug.

However the problem with the right border may be easily "fix" (even if it's not broken) adding to your ::before opacity:0 and in your hover::before, opacity:1.

The problem with the black background not filling the full width seems to me like a bug related with the use of transform: translateZ(0); AND z-index:1in the same class. If you remove both it will fix it, however you will lost some of your effects... but maybe you could try another way to make the same.

Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • The opacity thing is a good idea but it doesn't solve the entire issue. Removing translate z and z-index doesn't fix the hover issue either, all it does is remove the right hand border (oddly) but the background still doesn't fill 100% of the width – egr103 May 22 '15 at 13:11
0

This is an incredibly strange issue for me but it appears as though, like most other commenters have stated, that it is indeed a Chrome issue.

I needed to eradicate this problem completely so ended up using max-width to overcome it, which does have its own drawbacks. For example, if the button label is too long then it shall go on two lines and if its too short the button will look overly wide but they're compromises I'm happier with compared to the border and hover issues I was experiencing. Here's the working fiddle for reference: http://jsfiddle.net/3x4zc8tq/11/

Lets hope Google sort this...

egr103
  • 3,858
  • 15
  • 68
  • 119