Search code examples
htmljquerycssios

Rounded divs/buttons on iOS only??? jQuery, ajax, css

I've been working on a client that consumes an API and dynamically creates buttons. Everything works great on every platform, chrome dev tools show nothing out of the ordinary on every "device." I threw it up on AWS to test it on actual devices. Works/looks as expected on everything except on iOS (iphone and ipad) the divs/buttons are being rounded. Has anyone else seen this problem? Better yet know how to fix it? Here's the link:

https://s3.us-east-2.amazonaws.com/rpjr/GitHubAPI/index.html

Solution

  • iOS is applying default browser styles to your <button> elements (not div).

    Add this CSS rule to fix it:

    .tapMe {
  -webkit-appearance: none;
}

    If this still doesn't fix the rounded edges, add border-radius: 0 to that element.