0

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>
Community
  • 1
  • 1
Spaceman
  • 1,319
  • 13
  • 42
  • 1
    http://stackoverflow.com/questions/17487716/does-css-automatically-add-vendor-prefixes – max Jul 08 '15 at 00:18
  • 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 Jul 08 '15 at 00:30
  • @Spaceman Can include `html` at Question, create stacksnippets , jsfiddle http://jsfiddle.net to demonstrate ? – guest271314 Jul 08 '15 at 00:35
  • I would add a rule to my css file `.foo { -webkit-overflow-scrolling": touch } ` and then do `$('#bam').addClass('foo')` – max Jul 08 '15 at 00:36
  • @guest271314 See above :) – Spaceman Jul 08 '15 at 00:47
  • @max that may just work ill give it a whirl – Spaceman Jul 08 '15 at 00:47
  • @max that seems to be the go chrome picked up that it has been applied. If you want to submit that as an answer I will accept it :) – Spaceman Jul 08 '15 at 00:52

1 Answers1

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');
max
  • 96,212
  • 14
  • 104
  • 165