여러 인스턴스와 배경 크기를 사용할 때 Firefox 배경 이미지가 깜박임

Question

배경 이미지를 공유하는 페이지에 두 개의 요소가 있습니다. 내 페이지가 부트 스트랩을 사용하고 있으며 두 요소 모두 3 열 너비 컨테이너입니다. 각각은 배경을 가지고 있으며 background-size를 통해 포함됩니다.

두 번째 요소에서 너비가 90 % 인 배경을 만들어 다른 배경보다 약간 작게 만들었습니다.

Firefox에서는 첫 번째 요소 배경이 계속 깜박입니다. 두 배경이 같은 크기가되도록 CSS를 변경하면 문제가 사라집니다.

크롬과 IE에서는 잘 작동합니다. Firefox 문제 일뿐입니다.

누구나 비슷한 경험을 했나요?

이미지를 SVG에서 전환하려고 시도하고 깜박임을 멈 춥니 다. 그러나 배경 이미지에 지저분한 흙이 많아 SVG를 사용하지 않을 수 있으므로 SVG는 2MB와 비슷합니다. 여기

는 HTML의 JIST 및 CSS입니다 :

당신이 공유 클래스 떨어져 배경 크기의 선언을 이동하고 # 감사합니다-1에 있습니다 ID로 설정하면 어떻게됩니까

<section id="content-panel"> 
    <div class="container"> 
    <div class="row-fluid"> 
     <div id="thankyou-1" class="span3 bubble-bg-2"> 
     </div> 
     <div id="thankyou-2" class="span3 bubble-bg-2"> 
     </div> 
    </div> 
    </div> 
</section> 
.bubble-bg-2 { 
    background: url('/Content/Images/bg-bubble-2.png') no-repeat; 
    background-size: contain; 
} 
#thankyou-1 { 
    padding-top: 15px; 
    text-align: center; 
} 
#thankyou-2 { 
    background-position: center 25px; 
    background-size: 90% auto; 
    padding-top: 15px; 
} 

Answer 1

?

.bubble-bg-2 { 
    background: url('/Content/Images/bg-bubble-2.png') no-repeat; 
} 
#thankyou-1 { 
    background-size: contain; 
    padding-top: 15px; 
    text-align: center; 
} 
#thankyou-2 { 
    background-position: center 25px; 
    background-size: 90% auto; 
    padding-top: 15px; 
}