title: overflow-x:auto not working in safari and firefox
body: <p>I've checked several topics about this problem but none of them worked for me. I'm using Bootstrap. Here is my code.</p>
  
  <p><strong>TEMPLATE :</strong></p>
  
  <pre><code>&lt;div class="table-responsive for_safari"&gt;
      &lt;table class="table" style="width:5000px;"&gt;
          &lt;tr&gt;
              {partners_info}                         
                  &lt;td&gt;
                      &lt;a href="{link_partner}"&gt;
                          &lt;div style=" background-image: url('{img_partner}');" class="give_size"&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/td&gt;                       
              {/partners_info}                        
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS :</strong> </p>
  
  <pre><code>.give_size {
      background-repeat: no-repeat !important;
      background-size: 200px auto !important;
      background-position: center !important;
      height: 200px !important;
  }
  
  .for_safari {
      overflow-x: scroll; /* has to be scroll, not auto */
      -webkit-overflow-scrolling: touch;
  }
  </code></pre>
  
  <p>Scroll doesn't work in Safari and Firefox and I can't figure out why. Everything works fine in Chrome. <a href="http://pottersapp.com/IQ" rel="nofollow">Here is link where you can actually see the problem. Enter the page and scroll down. </a> Hope you can help. Thanks.</p>