Нужна помощь в выяснении, почему код продолжает ломаться

Question

Я работаю над каталогом поэтажных планов. Но я столкнулся с интересной проблемой и не могу ее решить. Макет имеет план этажа слева (тег раздела) и информацию о каталоге справа (класс sec2).

Я использую кодовую ручку в качестве справки. когда я принес часть кода, чтобы проверить его в разделе каталога информации (справа), он работал нормально. Но когда я начал удалять лишние элементы списка, он мне не понадобился, и он перестал отображаться. Тем не менее, я обнаружил, что если я закомментирую лишние элементы списка, он все равно будет отображаться. Я попытался проверить код, но нет никаких ошибок в отношении кода.

Я пытаюсь сохранить свой код в чистоте и удалить лишний код, который мне не нужен. Кто-нибудь знает, почему что-то подобное происходит?

Кстати, я кодирую в angularjs (код ниже). Пожалуйста, дайте мне знать, если требуется дополнительная информация.

HTML

<div class="floor-slider" ng-contoller="levCtrl as lev">

  <section id="Wrapper">

    <div id="Arrows">
      <button id="Prev" aria-hidden="true">&#10094;</button><br />
      <button id="Next" aria-hidden="true">&#10095;</button>
    </div>


    <div id="Slideshow">

      <div id="Slider">

        <!-- FLOOR 1-->
        <svg  x="0px" y="0px" viewBox="0 0 1085 703" id="F1" >


          <g class="st0">
            <g class="st1">
              <polygon
                points="1012.4,408.4 1012.4,700.4 35,700.4 35,429.5 43,429.5 43,692.4 342.2,692.4 342.2,370.2 222.4,370.2 
                222.4,362.2 350.2,362.2 350.2,522.7 502.1,522.7 502.1,530.7 350.2,530.7 350.2,692.4 559.6,692.4 559.6,530.7 545.2,530.7 
                545.2,522.7 583.8,522.7 583.8,530.7 567.6,530.7 567.6,692.4 777,692.4 777,530.7 626,530.7 626,522.7 777,522.7 777,471.3 
                799.6,471.3 799.6,479.3 785,479.3 785,692.4 1004.4,692.4 1004.4,479.3 845.6,479.3 845.6,471.3 1004.4,471.3 1004.4,408.4         " />
              <rect x="625.7" y="522.7" width="0.3" height="8" />
              <polygon points="696.9,441.1 497.5,441.1 497.5,433.1 688.9,433.1 688.9,402.9 696.9,402.9      " />
              <polygon points="454.9,441.1 431.2,441.1 431.2,267.7 696.9,267.7 696.9,306.6 688.9,306.6 688.9,275.7 439.2,275.7 439.2,433.1 
                454.9,433.1         " />
              <rect x="35" y="427.6" width="8" height="1.9" />
              <rect x="43" y="242.9" width="121" height="0.1" />
              <path d="M156,313.9h8v-24.4h75.8v-8H164V251h16.6v-91.5H43v-20.8h-8v241.2h8v-9.7h137.2v-8H164v-8h-8v8H43V250.9h113V313.9z
                M43,243v-75.5h129.6V243H43z" />
              <rect x="43" y="242.9" width="121" height="0.1" />
              <path d="M43,250.9L43,250.9l113,0.1v-0.1H43z" />
              <path d="M35,5.4v85h8v-77h299.2v268.1h-19.8v8h27.8V183.1h151.5v-8H350.2V13.4h209.4v161.7h-13.9v8H777v57.8h24.1v-8H785V13.4
                h219.4v219.5H843.3v8h161.1v76.7h8V5.4H35z M777,175.1H567.6V13.4H777V175.1z" />
              <rect x="843.3" y="232.9" width="0" height="8" />
              <rect x="1004.4" y="408.4" width="8" height="0" />
            </g>
          </g>
          <g>
            <polygon class="st2"
              points="838.9,210.1 838.9,493.7 501,493.7 501,641.7 95.8,641.7 95.8,288.3 445.3,288.3 445.3,210.1     " />
            <rect id="101" x="95.8" y="61.3" class="st2" width="349.5" height="227.1" />
            <rect id="102" x="642.1" y="61.3" class="st2" width="196.8" height="148.8" />
            <rect id="103" x="445.3" y="61.3" class="st2" width="196.8" height="148.8" />
            <rect id="104" x="838.9" y="300.7" class="st2" width="150.3" height="193" />
            <rect id="105" x="838.9" y="61.3" class="st2" width="150.3" height="239.5" />
            <rect id="106" x="501" y="493.7" class="st2" width="488.2" height="148" />
          </g>
        </svg>


 <!--FLOOR 2-->
        <svg  x="0px" y="0px" viewBox="0 0 1085 703" id="F2">
          <g class="st0">
            <g class="st1">
              <polygon
                points="1012.4,408.4 1012.4,700.4 35,700.4 35,429.5 43,429.5 43,692.4 342.2,692.4 342.2,370.2 222.4,370.2 
             222.4,362.2 350.2,362.2 350.2,522.7 502.1,522.7 502.1,530.7 350.2,530.7 350.2,692.4 559.6,692.4 559.6,530.7 545.2,530.7 
             545.2,522.7 583.8,522.7 583.8,530.7 567.6,530.7 567.6,692.4 777,692.4 777,530.7 626,530.7 626,522.7 777,522.7 777,471.3 
             799.6,471.3 799.6,479.3 785,479.3 785,692.4 1004.4,692.4 1004.4,479.3 845.6,479.3 845.6,471.3 1004.4,471.3 1004.4,408.4        " />
              <rect x="625.7" y="522.7" width="0.3" height="8" />
              <polygon points="696.9,441.1 497.5,441.1 497.5,433.1 688.9,433.1 688.9,402.9 696.9,402.9      " />
              <polygon points="454.9,441.1 431.2,441.1 431.2,267.7 696.9,267.7 696.9,306.6 688.9,306.6 688.9,275.7 439.2,275.7 439.2,433.1 
             454.9,433.1        " />
              <rect x="35" y="427.6" width="8" height="1.9" />
              <rect x="43" y="242.9" width="121" height="0.1" />
              <path d="M156,313.9h8v-24.4h75.8v-8H164V251h16.6v-91.5H43v-20.8h-8v241.2h8v-9.7h137.2v-8H164v-8h-8v8H43V250.9h113V313.9z
              M43,243v-75.5h129.6V243H43z" />
              <rect x="43" y="242.9" width="121" height="0.1" />
              <path d="M43,250.9L43,250.9l113,0.1v-0.1H43z" />
              <path d="M35,5.4v85h8v-77h299.2v268.1h-19.8v8h27.8V183.1h151.5v-8H350.2V13.4h209.4v161.7h-13.9v8H777v57.8h24.1v-8H785V13.4
             h219.4v219.5H843.3v8h161.1v76.7h8V5.4H35z M777,175.1H567.6V13.4H777V175.1z" />
              <rect x="843.3" y="232.9" width="0" height="8" />
              <rect x="1004.4" y="408.4" width="8" height="0" />
            </g>
          </g>
          <g>
            <polygon class="st2" points="887.4,213.9 887.4,471.6 674.6,471.6 674.6,635.4 570.9,635.4 570.9,436.8 217.8,436.8 217.8,67.6 
           385.7,67.6 385.7,158 756.1,158 756.1,213.9   " />
            <rect id="200" x="78.4" y="67.6" class="st2" width="139.4" height="83" />
            <rect id="201" x="78.4" y="150.6" class="st2" width="139.4" height="89" />
            <rect id="202" x="78.4" y="239.6" class="st2" width="139.4" height="100.9" />
            <rect id="203" x="78.4" y="340.5" class="st2" width="139.4" height="96.3" />
            <rect id="204" x="78.4" y="436.8" class="st2" width="321" height="198.6" />
            <rect id="205" x="399.4" y="436.8" class="st2" width="171.5" height="198.6" />
            <rect id="206" x="674.6" y="471.6" class="st2" width="332" height="163.7" />
            <rect id="207" x="756.1" y="67.6" class="st2" width="250.5" height="146.3" />
            <rect id="208" x="565.4" y="67.6" class="st2" width="190.7" height="90.3" />
            <rect id="209" x="385.7" y="67.6" class="st2" width="179.8" height="90.3" />
            <rect id="210" x="887.4" y="213.9" class="st2" width="119.2" height="257.7" />
          </g>
        </svg>







      </div>

    </div>

  </section>

<div class="sec2">
  <div class="directory">
    <input type="search" placeholder="search person or room" id="searchBox">
    <h2 class="show"  id="roomsHeading">Floor 1</h2>
    <ul class="rooms">
        <li class="show"><a href="100">Conference Room</a></li>
        <li class="show"><a href="101">Office #1</a></li>
        <li class="show"><a href="C">Office #2</a></li>
        <li class="show"><a href="D">Office #3</a></li>
        <li class="show"><a href="E">Office #4</a></li>
        <li class="show"><a href="F">Breakroom</a></li>
        <!-- <li class="show"><a href="G">Kerry Griffin & Cecilia Peralta Office</a></li>
        <li class="show"><a href="H"> Slanguage</a></li>
        <li class="show"><a href="I">Phone Room 1</a></li>
        <li class="show"><a href="J">Troy Mastin Office</a></li>
        <li class="show"><a href="K">Chillax</a></li>
        <li class="show"><a href="L"> Infomercial</a></li>
        <li class="show"><a href="M">Phone Room 2</a></li>
        <li class="show"><a href="N">Jorts</a></li>
        <li class="show"><a href="O">Frolf</a></li>
        <li class="show"><a href="P">Frosé</a></li>
        <li class="show"><a href="Q">Jackalope</a></li>
        <li class="show"><a href="R">Hangry</a></li>
        <li class="show"><a href="S">Production Room</a></li>
        <li class="show"><a href="T"> Broadcast Production Room</a></li>
        <li class="show"><a href="U">Phone Room 3</a></li>
        <li class="show"><a href="V">Phone Room 4</a></li>
        <li class="show"><a href="W">Cronuts</a></li>
        <li class="show"><a href="X"> Cyborg</a></li>
        <li class="show"><a href="Y">Phone Room 5</a></li>
        <li class="show"><a href="Z"> Sharknado</a></li>
        <li class="show"><a href="AA"> Mockumentary</a></li>
        <li class="show"><a href="BB">Labradoodle</a></li>
        <li class="show"><a href="CC">Phone Room 5</a></li>
        <li class="show"><a href="DD">Liger</a></li>
        <li class="show"><a href="EE"> Clickbait</a></li>
        <li class="show"><a href="FF">Spork</a></li> -->
    </ul>
  </div>
</div>
  <!-- <div class="lvl-info">
    <h1 class="lvl-num">2nd</h1>
    <div class="room-info" ng-if="collapse">
      <p>{{floor.rooms[0].title}}</p>
      <ul>
        <li>{{floor.rooms[0].department}}</li>
        <li>{{floor.rooms[0].person}}</li>
        <li>{{floor.rooms[0].item}}</li>
      </ul>
    </div>
  </div> -->

</div>

S CSS для информационного раздела

.floor-slider{
    h2{
    padding: 8px 0 10px 40px;
    color: #bbbbbb;
    font-family: 'Open Sans Condensed', sans-serif;
    letter-spacing: 1px;
    display: none
}

h2.show {
    display: block
}

div,
ul {
    display: block;
    float: left;
    box-sizing: border-box;
}

.sec2 {
    display:flex;
    grid-column-start: 2;
    grid-column-end:2;


    .directory {
        height: 100vh;
        overflow-y: auto;
        width: 250px;
    }

    ul {
        list-style: none;
        width: 100%;
        overflow: hidden;

        // li {
        //     display: none;


            .show {
                display: block;
            }

            a {
                padding: 5px;
                text-decoration: none;
                color: #fff;
                background: transparent;
                width: 100%;
                display: inline-block;
                line-height: 1.3em;
                font-size: 13px;

                &:before {
                    content: "("attr(href) ") - ";
                    height: 23px;
                    float: left
                }

                .active{
                    background: #ccc;
                }
            }
        // }
    }

}

// a::before {
//     content: "("attr(href) ") - ";
//     height: 23px;
//     float: left
// }

// .main ul li a.active {
//     background: #ccc;
// }

// .main .map {
//     height: 100vh;
//     overflow-y: auto;
//     width: calc(100% - 250px)
// }

input[type=search] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    width: 96%;
    margin: 5px 2%;
    background: rgba(0, 0, 0, .5);
    border: 1px solid #ddd;
    color: #fff;
}

@keyframes flicker {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

// @keyframes location {
//     0% {
//         opacity: 0;
//     }

//     20% {
//         opacity: 1;
//     }

//     100% {
//         opacity: 0;
//     }
// }
}

S CSS для плана этажа

.floor-slider{
        align-items: center;
        display: grid;
        grid-gap: 5%;
        grid-template-columns:auto 20%;
        justify-content: center;
        padding: 50px;
        min-height: 80vh;

    #Wrapper {
      display: flex;
        height: 600px;
      justify-content: center;
      position: relative;

      #Slideshow {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        position: relative;
      }


      #Slider {
        border: 20px solid #1C1D21;
        height: 600px;
        overflow: hidden;
        width: 800px;
        background-color: #fff;

        svg{
          height: 555px;
          width: 800px;
          transition: all 1s;

          .st0 {
            display: none;
          }

          .st1 {
            display: inline;
          }

          .st2 {
            fill: transparent;
            stroke: #000000;
            stroke-width: 10;
            stroke-miterlimit: 10;
            pointer-events: all;

            &:hover {
              fill: #dac98d;
            }
            &:active {
              fill:#b3a369;
              animation: flicker 1s ease-in-out infinite;
            }
          }
          .st3 {
            fill: none;
            stroke: #000000;
            stroke-width: 10;
            stroke-miterlimit: 10;
          }
          }
      }



    //navigation
    #Arrows {
      /*    display: flex; */
      justify-content: space-between;
      height: 50px;
      /*    position: absolute; */
      float: left;

      button {
        background-color: rgba(255, 255, 255, .25);
        color: #1C1D21;
        cursor: pointer;
        height: 50px;
        width:50px;
        border: none;
        transition: background-color .5s, color .5s;
        font-size:30px;


        // &:first-of-type {
        //   padding-right: 20px;
        // }

        // &:last-of-type {
        //   padding-left: 20px;
        // }

        &:hover {
          background-color: rgba(28, 29, 33, .75);
          color: #EEEFF7;
        }
      }

      #Prev {
        transform: rotate(90deg);
        top: 0;
      }

      #Next {
        transform: rotate(90deg);
        bottom: 0;
        position: absolute;
      }
    }
    }






    // .lvl-info{
    //   grid-column-start: 2;
    //   grid-column-end:2;
    //   float: right;
    //   align-self: flex-start;


    //   .lvl-num {
    //     color: #fff;
    //     font-size: 100px;
    //     border-bottom: solid 2px #fff;
    //   }

    //   .room-info{
    //     color:#fff;
    //   }
    // }

    }

https://plnkr.co/edit/tgrDJTy46wer3bq0?open=lib%2Fscript.js&deferRun=1

Answer 1

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