closingtag/calc-polyfill

Doesn't work with Selectivizr and nth-selectors

Closed this issue · 4 comments

corysimmons commented 
.foo {
  background: red; /* works */
  width: calc(100% / 3); /* works */
}

.foo:nth-child(1) {
  background: red; /* works */
  width: calc(100% / 3); /* doesn't work */
}

IE8

rodebert commented

@corysimmons This should only work with the version 1.0.3b of selectivizr. See http://selectivizr.com/tests/respond/

corysimmons commented

Still doesn't work.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="bower_components/Selectivizr bower/selectivizr.js"></script> <!-- 1.0.3b -->
  <script src="bower_components/calc-polyfill/dist/calc.min.js"></script> <!-- 0.1.1 (bower ver) -->
</head>
<body>

  <div>hello</div>

  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
div:nth-child(1n) {
  background: blue;
  width: calc(100% / 3);
}

rodebert commented

Jquery needs to be included before selectivizr.

corysimmons commented

Awesome!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div>1</div>
  <div>2</div>
  <div>3</div>

  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="bower_components/calc-polyfill/dist/calc.min.js"></script>
  <script src="bower_components/Selectivizr bower/selectivizr.js"></script>
</body>
</html>

Works!