How to apply "-webkit" css rules using jquery .css

Question

Hey fellas and ladies,

I'm having an issue applying the following css rule.

$('#bam').css({"-webkit-overflow-scrolling": "touch"})

Is applying -webkit stuff supported in jquery being a nonstandard rule? When I apply nothing happens and no error occurs.

However if I do the the same syntax and change color it works.

As a use case im trying to fix an issue with an iphone iframe overflow problem see iframe size with CSS on iOS for my current issue and Im not in a position to use inline styles or external css.

Any ideas :)?

Added jsbin example.

https://jsbin.com/vizacezeva/edit?html

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script>
    $( document ).ready(function() {
      $('#bam').css({"overflow-scrolling": "touch"})
      console.log('hi');     
      console.log($('#bam').css("overflow-scrolling"));
    });
  </script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="bam" style="width:100%; padding:0px;">
      <iframe src="http://www.jsbin.com" style="width:1px; min-width:100%; max-width:100%;">
      </iframe>
  </div>
</body>
</html>

Hmm adding it using $('#bam').css({"overflow-scrolling": "touch"}) still does not work or at least firebug and chrome debug tools doesn't show the div having it applied. :( Good link tho very relevant good info :) @max — Spaceman
– Spaceman, Commented Jul 8, 2015 at 0:30
@Spaceman Can include html at Question, create stacksnippets , jsfiddle jsfiddle.net to demonstrate ? — guest271314
– guest271314, Commented Jul 8, 2015 at 0:35
I would add a rule to my css file .foo { -webkit-overflow-scrolling": touch } and then do $('#bam').addClass('foo') — max
– max, Commented Jul 8, 2015 at 0:36

max · Accepted Answer · 2015-07-08 00:56:57Z

1

Instead of adding the CSS rule with jQuery you can declare a rule in your CSS file and add a class which applies the style.

/** style.css **/
.foo { -webkit-overflow-scrolling: touch; } 

// app.js
$('#bam').addClass('foo');

answered Jul 8, 2015 at 0:56

max

103k15 gold badges113 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply "-webkit" css rules using jquery .css

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related