CSS Ошибка изображения границы в Safari и iPhone в любом браузере - PullRequest
Новая
       17

CSS Ошибка изображения границы в Safari и iPhone в любом браузере

0 голосов
/ 24 апреля 2020

Моя навигационная панель имеет около 3px of white space до left, right, and top моей навигационной панели. Это уходит, когда я удаляю свой border-image. Почти как внешняя оболочка не имеет ширины 100% (она есть!).

Мне удалось несколько исправить левую / правую проблему с помощью хака, (margin-left: -3px; width: 100% + 3px;) Я бы хотел понять причину этого и найти лучшее решение. Иногда, когда я обновляю браузер sh, этот хак вызывает другие проблемы (все остальное - 3 пикселя к короткому справа).

Я спросил другого очень опытного разработчика, который не знал, почему он так себя ведет. 

.nav-border {
  border-image: url(../assets/agGraphicElements/mobile/lineGray500x12.png) 60;
  border-bottom: 6px solid;
  border-image-repeat: repeat;
  /* Fixes bug on iphones / ipads and safari Part 1 */
  width: calc(100% + 6px);
  margin-left: -3px !important;
}

.nav-inner-wrapper {
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-start;
  padding-right: 9px;
  padding-left: 9px;
  /* Fix bug on iphones / ipads and safari Part 2 */
  width: calc(100% - 3px);
}

.ag-nav {
  width: 100%;
  justify-content: space-around;
}
<div class="pos-f-t sticky-top nav-border">
  <nav class="navbar navbar-dark bg-ag-dark px-0">
    <div class="container-lg d-flex nav-inner-wrapper">
      <button class="navbar-toggler d-lg-none d-xl-none" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <ul class="nav nav-uncollapsed ml-2 ag-nav">
        <li class="nav-item d-none d-sm-none d-md-block">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item  d-none d-sm-none d-md-block">
          <a class="nav-link" href="#">Menu</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="modal" data-target="#exampleModalCenter" href="#">Order</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="pages/catering/cateringMenu/menuCategory.html">Catering</a>
        </li>
        <li class="nav-item d-xsm-none">
          <a class="nav-link" href="pages/otherPages/careers.html">Careers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link d-none d-sm-none d-md-block" href="#">About Us</a>
        </li>
      </ul>
      <a href="./">
        <img class="ml-2 ag-logo" src="assets/other/mobile/agLogo.png" alt="" />
      </a>
    </div>
  </nav>
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-ag-dark p-4">
      <ul class="nav d-flex flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="pages/mainMenu/menuCategory.html">Menu</a>
        </li>
        <li class="nav-item">
          <a data-toggle="modal" data-target="#exampleModalCenter" class="nav-link" href="#">Order</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="pages/otherPages/about.html">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="pages/otherPages/careers.html">Careers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="pages/catering/menuCategory.html">Catering</a>
        </li>
      </ul>
    </div>
  </div>
</div>
...