Radio buttons appearing as squares on iOS 9.1

[tekoyaki]

Is this an intentional styling of bootstrap?

Screenshot taken directly from BS4 docs page without alterations. Tested on iPhone 6s and iPhone simulator from xcode.

[cvrebert]

No, not intentional.

[tekoyaki]

It seems to be caused by input { border-radius: 0; }

Mobile safari uses border-radius: 8px by default.

[tekoyaki]

Pretty odd behavior of mobile Safari.

http://codepen.io/radiuskuntoro/pen/rLwzpE

[cvrebert]

Indeed. Using the style inspector shows that iOS Safari's UA stylesheet includes:

input[type="radio"] {
  -webkit-appearance: radio;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 16px;
  height: 16px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background-color: rgba(255, 255, 255, 0.00784314);
}

And as your CodePen demonstrates, our code is also affecting iOS Safari's default checkbox styles, which are:

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 16px;
  height: 16px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background-color: rgba(255, 255, 255, 0.00784314);
}

[mdo]

Fixed by #20695.