title: Flickering Text issue in Firefox in bootstrap carousel
body: <p>I have used the bootstrap carousel for sliding the site content.</p>
  
  <p>Dummy HTML for content carousel slider is as follows.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
       &lt;div class="carousel-item active"&gt;
        &lt;h3&gt;Content Title 1&lt;/h3&gt;
        &lt;span&gt;Content Body Text 1&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;h3&gt;Content Title 2&lt;/h3&gt;
        &lt;span&gt;Content Body Text 2&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;h3&gt;Content Title 3&lt;/h3&gt;
        &lt;span&gt;Content Body Text 3&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I run the website in the Firefox then the content of the carousel slightly flickers when sliding of a carousel-item is completed. This issue does not occur in Chrome.</p>
  
  <p>I have tried the following solutions:</p>
  
  <pre><code>1..carousel-inner &gt; .item {
          position: relative !important;
          -webkit-transition: 0.1s ease !important;
          -moz-transition: 0.3s ease !important;
          -o-transition: 0.3s ease !important;
          transition: 0.3s ease !important;
     }
  
  2..carousel-inner {
          overflow: hidden !important;
          text-shadow: 0 0 !important;
     }
  </code></pre>
  
  <p>I checked other posts and maximum post suggest to overwrite the transition effect of the bootstrap carousel, which I tried in the first solution, but it's not working for me.</p>
  
  <p>Is there any solution for this?</p>