设置圆角的输入框在Safari中顶部出现白色像素问题

This is a common rendering quirk in Safari when dealing with inputs that have border-radius set but only a single visible border (in your case, the bottom border). Safari tends to fill the rounded corners with the border color even for the sides you've set to "none", which causes those white pixels to show up against your semi-transparent background.

Here are a few reliable fixes you can try:

1. Replace Border-Bottom with Box-Shadow #

Instead of using border-bottom, use a box-shadow to simulate the bottom border. Box-shadow renders more cleanly with border-radius in Safari:

.loginTextField {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  /* Remove border-bottom and add this */
  box-shadow: 0 2px 0 0 white;
  border: none;
  outline: none;
}

2. Add Transparent Borders for Other Sides #

Give the input transparent borders on all sides except the bottom. This gives Safari a "fill" for the rounded corners without showing visible borders:

.loginTextField {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  /* Replace border: none with this */
  border: 2px solid transparent;
  border-bottom: 2px solid white;
  outline: none;
}

3. Adjust Background Clip (Alternative) #

If the above fixes don't work, try setting background-clip: padding-box to ensure the background doesn't bleed into the border area:

.loginTextField {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border-bottom: 2px solid white;
  border: none;
  outline: none;
  background-clip: padding-box;
}

All these approaches should resolve the white pixel issue in Safari while keeping your desired styling intact in Chrome and other browsers.

内容的提问来源于stack exchange，提问作者LinusG.