title: How to apply "-webkit" css rules using jquery .css
body: <p>Hey fellas and ladies,</p>
  
  <p>I'm having an issue applying the following css rule.</p>
  
  <pre><code>$('#bam').css({"-webkit-overflow-scrolling": "touch"})
  </code></pre>
  
  <p>Is applying -webkit stuff supported in jquery being a nonstandard rule? When I apply nothing happens and no error occurs.</p>
  
  <p>However if I do the the same syntax and change color it works.</p>
  
  <p>As a use case im trying to fix an issue with an iphone iframe overflow problem see <a href="https://stackoverflow.com/questions/16937070/iframe-size-with-css-on-ios">iframe size with CSS on iOS</a> for my current issue and Im not in a position to use inline styles or external css.</p>
  
  <p>Any ideas :)?</p>
  
  <p>Added jsbin example.</p>
  
  <p><a href="https://jsbin.com/vizacezeva/edit?html" rel="nofollow noreferrer">https://jsbin.com/vizacezeva/edit?html</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $( document ).ready(function() {
        $('#bam').css({"overflow-scrolling": "touch"})
        console.log('hi');     
        console.log($('#bam').css("overflow-scrolling"));
      });
    &lt;/script&gt;
  
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="bam" style="width:100%; padding:0px;"&gt;
        &lt;iframe src="http://www.jsbin.com" style="width:1px; min-width:100%; max-width:100%;"&gt;
        &lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>