Strange button styling on chrome on iOS

Question

I have a bunch of cards on a site that I'm working on. They display some content pulled from a database, and when clicked link to a more detailed content page for that particular card. Everything is working great, across all browsers and screens, except that the cards are turned into circles on iOS and a gradient is applied as the background-color. The cards have a border-radius set to 15px but are behaving as if border radius is 50%. (There are other elements with the same border-radius elsewhere on the site but they are not buttons and displaying fine),

I have seen other posts and understand that this may be a problem with default styling applied by iOS. I have tried their solutions, by setting -webkit-appearance: none; on the button and globally, but this doesn't fix the problem. I have also tried to set -webkit-border-radius: 15px; on the button itself, to no avail.

Any ideas what might be causing the issue and how to override it? Additionally is there a way to access devtools from inside chrome on iOS to see what is happening?

Here is the css styling from the button (there are also media-queries that change the width and height at given breakpoints that I've omitted).

.toolcard {
  -webkit-appearance: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  height: 200px;
  margin: 0 20px 40px;
  flex: none;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  background-color: white;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 1.4px 1.1px rgba(0, 0, 0, 0.034), 0 3.3px 2.6px rgba(0, 0, 0, 0.048), 0 6.2px 5px rgba(0, 0, 0, 0.06), 0 11.1px 8.9px rgba(0, 0, 0, 0.072), 0 20.9px 16.7px rgba(0, 0, 0, 0.086), 0 50px 40px rgba(0, 0, 0, 0.12);
}

Edit: demo link removed

For illustration, here are two images showing the difference:

Ex: Correct button styling.

Ex: What is looks like on iOS. what it looks like on iOS

Hi. Can you make the effort and have a working example. Remove the templating stuff in your html — Dejan.S, Dec 22 '20 at 19:39
It's likely something being overwritten, or an extra css rule you need to apply. But without seeing an example, we'll all just be guessing. — Bjorn.B, Dec 22 '20 at 20:46
So it looks like reboot.scss (part of bootstrap) is overwriting your appearance none. To test this you could try using -webkit-appearance: none !important; — Graeme Niedermayer, Dec 22 '20 at 22:13
Thanks @GraemeNiedermayer, that's definitely done it. Will post as the answer. — Evan Moses, Dec 22 '20 at 22:29

score 2 · Answer 1 · answered Dec 22 '20 at 22:34

Answered by Graeme in the comments to the original post, but will post as the answer so others can see easily:

Bootstrap was overriding the -webkit-appearance: none css. The solution was to use

.someButtonClass {
  -webkit-appearance: none !important;
}

Strange button styling on chrome on iOS

1 Answers1

Linked