На моем сайте я использую bootstrap аккордеон в меню. Я смог сделать это как угодно в Google chrome, но в Safari и на моем iPhone он показывает мне неправильные цвета и стили в целом для этого. Это известная ошибка или я просто что-то не так делаю? (веб-сайт: http://ketyi.com) chrome:
сафари:
Вот 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);}
}
}
}
Спасибо за предоставленную помощь.