Bootstrap accordian different background color on safari

Question

On my website I'm using bootstrap accordian in the menu. I was able to make it as desired in google chrome, but in safari and on my iPhone it is showing me wrong colours and styles in general for that. Is this a known bug or I'm just doing something wrong? (website: http://ketyi.com) chrome:

safari:

Here is the css:

     <div class="card">
        <div class="heading" role="tab">
            <a class="collapsed" type="button" data-toggle="collapse" data-target="#collapse-{{ mainCategory.name }}"
               aria-expanded="{% if (categoryParentId is not null) and (categoryParentId == mainCategory.id) %}true{% else %}false{% endif %}" aria-controls="collapse-{{ mainCategory.name }}">
                {{ mainCategory.name }}
            </a>
        </div>
        <div id="collapse-{{ mainCategory.name }}" class="collapse {% if categoryParentId == mainCategory.id %}show{% endif %}" aria-labelledby="{{ mainCategory.name }}" data-parent="#categories">
            {% for category in mainCategory.children %}
                <div class="card-body">
                    <a {% if categorySlug == category.slug %}class="active"{% endif %} href="{{ path('category_show', {'categorySlug': category.slug}) }}">
                        {{ category.name }}
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
    <hr/>

  .mobile-navigation { padding: 3rem;
    a { color: #fff; width: 100%;
      &:before {font-family: 'Glyphicons Halflings';content: "\e080";float: right;transition: all 0.5s;}
      &:hover { text-shadow: none; }
    }
    .card { background-color: unset; border: none; }
    hr { width: 100%; top: 0; }
    .heading {
      a:before {font-family: 'Glyphicons Halflings';content: "\e114";float: right;transition: all 0.5s;}
      &.active {
        a:before {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform: rotate(180deg);}
      }
    }
  }

Thank you for any help provided.

Answer 1

You have defined the link as type="button" which it shouldn't be. Thats what causing the problem.

Change:

<a class="collapsed" type="button" data-toggle="collapse" ...

to this:

<a class="collapsed" data-toggle="collapse" ...

Answer 2

Add style to anchor tag -webkit-appearance: none;