Weird border-width behaviour in Chrome?

Question

My Chrome(v. 33.0.1750.152) is acting really weird with border width of some inputs.

Here's a Codepen demonstrating it: http://codepen.io/anon/pen/Dkadl.

I added the Increase margin.. and Decrease margin.. buttons to make it easier to see (click them to change margin-bottom property accordingly).

The margin-bottom property of .user-inputs seems to be affecting the border-width of my inputs as well as blurring other elements. I've only been able to see this bug in Chrome.

What's wrong?

edit: This is how it looks like for me: Default view Added 2px to margin-bottom
As you can see, elements get really blurry and the border-width of some elements is increased..

on windows and latest chrome, there is no difference except the margin itself, Border-width is not changing at all for me, Are you using mac — Mehmet Eren Yener, Mar 21 '14 at 14:27
can you remove border:0 than apply border-top border-left and border right for each side except bottom, I changed it and now it is not like that — Mehmet Eren Yener, Mar 21 '14 at 14:34
still getting error and the problem can be because of chrome but there must be way to fix it — Mehmet Eren Yener, Mar 21 '14 at 14:45
I think you need to reset this [I tried it but could not solve it I will check for it later]input, input[type="password"], input[type="search"], isindex — Mehmet Eren Yener, Mar 21 '14 at 15:27

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

This is caused by the Translate 50%, on margins where it is not an integer (partial pixel), it makes the content blurry.

As answered on this similar question, add these to your #login-section block:

-webkit-font-smoothing: subpixel-antialiased;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

See updated Codepen

edited May 23 '17 at 12:07

Community

1
1

answered Jan 04 '16 at 23:13

knighter

1,137
8
13

Weird border-width behaviour in Chrome?

1 Answers1