ДИВ граница не работает, когда установлено, что DIV внутри SVG

Question

вот мой код,

<div class="content-container-fluid">  
    <div class="row">     
     <div class="cols-sample-area" style="width: 100%;"> 
      <div id="scrollcontent" style="width:92% !important; transform: translate(0, 50%);">     
       <div id="scrollcontenttemplate_group_" style="position: absolute;"> 
        <div id="scrollcontentthumbleft" style="position: absolute; top: 42px; cursor: pointer; z-index: 1; left: 276.34375px;"> 
         <div style="width:8px;height:36px;background-color: #41d335;border: 1px solid black;"></div> 
        </div> 
       </div> 
       <svg id="scrollcontent_svg" style="overflow:visible;position:relative" height="120" width="1188"> 
        <g id="scrollcontenthigherLevel" style="cursor: pointer;"> 
         <line x1="1" y1="0" x2="1" y2="21" stroke="black" stroke-width="1" stroke-dasharray="1 1 10"></line> 
        </g> 
       </svg> 
      </div> 
     </div> 
    </div> 
</div> 

линия ход тир массив применяется к этому DIV? как это решить?

Почему граница показана так: как решить?

Sample link

Answer 1

прочерк массиву SVG является на самом деле не влияет на <div>. Это просто кажется странной рендеринга/композиционной аномалией в Chrome.

Вы можете подтвердить, что это не ташар, изменив значения дашара. Также, если вы увеличиваете масштаб страницы (Ctrl +), «лихой» уходит.

Я понятия не имею, в чем причина, но вы можете захотеть до report the bug to Chrome.