當position：fixed被添加到元素（僅限Safari）時，爲什麼元素會跳出它的容器

Question

我正在使用一個名爲Stacks的簡單jQuery插件，用於在標題碰到標題標題時使我的標題標題固定。該插件將添加像.fixed和.absolute這樣的類，然後我使用CSS過渡來調整標題標題的大小，當用戶開始滾動標題一下時。

這是工作在我測試過的每個瀏覽器（甚至IE8），除了Safari瀏覽器。它看起來並不重要，因爲它在所有版本上都打破了。標題似乎跳出容器，它的背景幾乎完全消失。

Screenshot that compare the bug (imgur link)

我是一個JavaScript小白，所以我準備告訴我如何做是錯誤的，但任何方向將不勝感激。

這裏是我的JS：

jQuery(document).ready(function($) { 
    if($(window).width() >= 768){ 
     $('#tour-headline').waypoint(function() { 
      $('#tour-headline').removeClass("large").addClass("small"); 
     }); 
     $('#news-headline').waypoint(function() { 
      $('#news-headline').removeClass("large").addClass("small"); 
     }); 
     $('#music-headline').waypoint(function() { 
      $('#music-headline').removeClass("large").addClass("small"); 
     }); 

     $('body').stacks({ 
      body: 'section', 
      title: '.section-headline', 
      offset: 110, 
      margin: 0 
     }); 
    } 
}); 

這裏是我的CSS

.section-headline { 
background: #e1eaf0; 
border-bottom: 8px #fcef7f solid; 
} 

.section-headline.small h3 { 
padding: 10px 0; 
font-size: 16px; 
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s; 
transition: all 0.4s; 
} 

.section-headline.large h3 { 
padding: 25px 0; 
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s; 
transition: all 0.4s; 
} 

.fixed{ 
position: fixed; 
top:110px; 
left:0; 
right:0; 
z-index:90; 
} 

.absolute{ 
position: absolute; 
width: 100%; 
margin-bottom:0; 
z-index:91; 
bottom: 0; 
box-sizing:border-box; 
} 

section{ 
position: relative; 
} 

您可以在dollypartonentertainment.com查看自己網站

編輯：我發現我的問題！我在.section-headline上使用transition之前的幾行文件 - 我不完全確定它爲什麼會導致它以它的方式做出反應，但就是這樣！

Answer 1

我不能評論還，所以我張貼在這裏評論...不知道這會有所幫助，但你可以添加以下，至極防止東西從飛出的div的

overflow: hidden;