Таинственный глюк на нашем веб-приложении. ПОМОГИТЕ - так долго с этим боролись - PullRequest
Новая
       32

Таинственный глюк на нашем веб-приложении. ПОМОГИТЕ - так долго с этим боролись

0 голосов
/ 13 марта 2019

В нашем веб-приложении есть загадочный сбой:

Как это выглядит

What it looks like

Что это должно было сделатьвыглядит как

What it supposed to look like

Это происходит только на сафари на iphone, а не на ноутбуке.

Вот наш HTML / CSS / JS: 

    $("nav [href]").each(function() {
      if (this.href == window.location.href) {
       $(this).addClass("highlight");
      }
     });
    nav {
     width:100%;
     position:fixed;
     bottom:0;
     background-color:#fff;
     padding:8px 0px;
     border-top:solid 1px #ededed;
     z-index:5;
     padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    nav a {
     width:25%;
     text-align:center;
     color:#777;
     font-weight:400;
     font-size:14px;
     float:left;
     filter: brightness(100%) grayscale(1);
    }
    .highlight {
     color:#1c95e2;
     filter: brightness(100%);
    
    }
    nav a img {
     height:28px;
     padding-bottom:5px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
      <a href=" ">< img src="img/home.png"><br>主页</a >
      <a href="learn">< img src="img/learn.png"><br>学习计划</a >
      <a href="shop">< img src="img/bag.png"><br>服务项目</a >
      <a href="user">< img src="img/user.png"><br>用户</a >
</nav>
...