1

I have created an HTML button with a narrow border. When you click on the button, I change the width of the border. In the demo below, this change is highly exaggerated. On Google Chrome 84.0.4147.89 and Opera 70.0.3728.71, the changed border-width has the effect of moving the button downwards. On Firefox 79.0, the buttons stay where they are, which is what I expect.

button {
  width: 30vmin;
  height:30vmin;
  border: 1vmin solid #888;
  box-sizing: border-box;
}

button:active {
  border-width: 10vmin;
}
<button></button>
<button></button>
<button></button>

JSFiddle

Why is this happening on Chrome and Opera? How can I get the buttons to stay in their initial position on all browsers?

James Newton
  • 6,623
  • 8
  • 49
  • 113
  • Why are you using vmin for the unit? – Hosein Shendabadi Aug 02 '20 at 07:22
  • Interestingly, if you specify text or a pseudo-element for the button, there is no shifting down at least in my Chrome browser https://jsfiddle.net/vyspiansky/qdpbsxLw/ – Ihor Vyspiansky Aug 02 '20 at 07:31
  • 1
    @HoseinShendabadi `vmin` is not the issue. The effect is the same with `vh` or `px` or any unit other you choose. `30vmin` simply ensures that you will see the buttons full size inside whatever screen space you have. – James Newton Aug 02 '20 at 07:40
  • you need to add vertical-align:top ... the issue is the baseline alignment – Temani Afif Aug 02 '20 at 08:42

1 Answers1

3

I see the inspect elements in chrome and Firefox shows different in the script(JS) tag:

  1. I see in Chrome the JS snippet is enabled however in firefox it is commented out.
  2. vmin and vmax has different responses in different browsers, so you need to look into if you want to change that to vh and vws.
  3. I have tried my below code in both Chrome and Firefox.

however I was able to find a small hack for the issue which solves for all browsers with a a line of code, if it works for you then:

body {
  display: flex;
}

button {
  width: 30vmin;
  height: 30vmin;
  border: 1vmin solid #888;
  box-sizing: border-box;
}

button:active {
  border-width: 10vmin;
}
<button></button>
<button></button>
<button></button>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43