title: Is it possible for a feature detector such as Modernizr to break a page rendering upon script load if the page contains css transformations?
body: <p><strong>Question</strong></p>
  
  <p>Is it possible for a feature detector such as Modernizr to break a page rendering upon script load if the page contains css transformations?</p>
  
  <p><strong>Abstract</strong></p>
  
  <p>I am trying to create an animation using css <code>transform</code> where an arrow is moving downwards along an invisible line. Things work great until I load the modernizr library. At this point all elements are rotated 45 degrees and stripped to a thin line (most likely the elements gets hooked to the angle of the animated arrow) like this. 
  <a href="https://i.stack.imgur.com/CzEzo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CzEzo.png" alt="The corrupt page rendering with modernizr"></a></p>
  
  <p>If I remove the script call to modernizr the page renders correctly like this.</p>
  
  <p><a href="https://i.stack.imgur.com/5c6IG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5c6IG.png" alt="The correct page rendering without modernizr"></a></p>
  
  <p>The animation works flawless regardless if modernizr is loaded or not - it's only the presentation of the page that seems to break up. Modernizr as script seems to load without errors by the way - it only messes with the visual output.</p>
  
  <p><strong>Note:</strong> Trying these following lines of code in a snippet viewer seem to render everything as it should, but the images above proves something different. The visible texts are different from the images, but all code is identical.</p>
  
  <p>The animated css looks like this (credit to Joshua MacDonald for the inspiration - <a href="https://codepen.io/JoshMac/pen/MaYEmJ" rel="nofollow noreferrer">https://codepen.io/JoshMac/pen/MaYEmJ</a>).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var config = {
      elements: {
        navheader: "header",
        navheadstyle: "header h1"
      },
      identifiers: {},
      classes: {
        parallaxtop: ".parallax-1"
      }
    };
  
    $(function() {
      $(config.elements.navheader).data("size", "big");
    });
  
    $(window).scroll(function() {
      if ($(document).scrollTop() &gt; 0) {
        if ($(config.elements.navheader).data("size") === "big") {
          $(config.elements.navheader).data("size", "small");
          $(config.elements.navheadstyle).stop().animate({
              "font-size": "2.0em"
            },
            200
          );
        }
      } else {
        if ($(config.elements.navheader).data("size") === "small") {
          $(config.elements.navheader).data("size", "big");
          $(config.elements.navheadstyle).stop().animate({
              "font-size": "2.5em"
            },
            200
          );
        }
      }
    });
  
    (function() {
      var parallax = document.querySelectorAll(".parallax"),
        speed = 0.5;
  
      $(window).scroll(function() {
        [].slice.call(parallax).forEach(function(el, i) {
          var windowYOffset = window.pageYOffset,
            elBackgrounPos = "0 " + windowYOffset * speed + "px";
  
          el.style.backgroundPosition = elBackgrounPos;
        });
      });
    })();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*! HTML5 CSS3 Styles v1.0.0 */
  
  html,
  body,
  ol,
  ul,
  li,
  p {
    font: normal normal normal 15px/normal 'Titillium Web', 'Montserrat', 'Raleway', 'Gudea', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: left;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 8px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.15);
  }
  
  body {
    background: #fff;
    color: #606060;
  }
  
  nav {
    background: rgb( 255, 255, 255);
    /* Fall-back for browsers that don't
                                      support rgba */
    background: rgba(255, 255, 255, 0.9);
  }
  
  
  /* Desktop styles */
  
  @media (min-width: 300px) {
    header nav li:first-child {
      display: none;
    }
    header.wrapper {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    header nav ul {
      margin: 10px auto;
      width: 100%;
      text-align: center;
    }
    header nav li {
      display: inline-block;
      list-style-type: none;
      font-weight: bold;
      padding: 0 10px;
    }
    header .container h1 {
      font: normal normal normal 2.5em/normal 'Gudea', Helvetica, Arial, sans-serif;
    }
    header .container&gt;div {
      padding: 10px;
      text-align: center;
      text-transform: uppercase;
    }
    nav .floatright {
      /* This should be replaced with something more convenient. Mobiles don't use this - better remove it from the code stack. */
      float: right;
    }
  }
  
  header:after,
  nav:after,
  .floatright:after,
  .arrowcontainer&gt;div:after {
    content: '';
    display: block;
    clear: both;
  }
  
  
  /* ============================================================
    SECTIONS
  ============================================================ */
  
  section.module:last-child {
    margin-bottom: 0;
  }
  
  section.module h2 {
    font-family: 'Playfair Display', serif;
    width: 25%;
    margin: 0 auto 40px auto;
    font-size: 2.8em;
    text-align: center;
  }
  
  section.module p {
    font-family: 'Open Sans Condensed', sans-serif;
    margin-bottom: 40px;
    font-weight: 300;
  }
  
  section.module p:last-child {
    margin-bottom: 0;
  }
  
  section.module.content {
    padding: 40px 0;
  }
  
  section.module.parallax {
    padding: 0;
    background-position: 0 0;
  }
  
  section.module.parallax h1 {
    font-family: 'Playfair Display', serif;
    width: 50%;
    margin: 0 auto;
    font-size: 4em;
    text-align: center;
  }
  
  section.module.parallax-1 {
    background: #c0c0c0;
  }
  
  footer.module.parallax-2 {
    background: #555;
  }
  
  section.module.parallax-3 {
    background: #0000ff;
  }
  
  @media all and (min-width: 600px) {
    section.module h2 {}
    section.module p {}
    section.module.parallax {
      padding: 350px 0;
    }
    section.module.parallax h1 {}
  }
  
  @media all and (min-width: 960px) {
    section.module.parallax h1 {}
  }
  
  .arrowcontainer {
    position: relative;
    width: 100%;
    bottom: -5em;
    text-align: center;
  }
  
  .arrowtext {
    font-weight: bold;
  }
  
  .arrow,
  .arrow:before {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
  }
  
  .arrow {
    fill: none;
    width: 20px;
    height: 20px;
    top: 20%;
    left: 50%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: none;
    border-top: none;
    border-right: 1px transparent solid;
    border-bottom: 1px transparent solid;
  }
  
  .arrow:before {
    content: '';
    width: 20px;
    height: 20px;
    top: 50%;
    border-left: none;
    border-top: none;
    border-right: 1px #000 solid;
    border-bottom: 1px #000 solid;
    /*-webkit-animation-delay: 2s;
    -ms-animation-delay: 2s;
    animation-delay: 2s;*/
    -webkit-animation-duration: 2s;
    -ms-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: none;
    -ms-animation-fill-mode: none;
    animation-fill-mode: none;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: arrow;
    -ms-animation-name: arrow;
    animation-name: arrow;
  }
  
  @keyframes arrow {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate(40px, 40px);
      -ms-transform: translate(40px, 40px);
      transform: translate(40px, 40px);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.gisslen.net/framework/core/client/modernizr-3.5.0-custom.min.js"&gt;&lt;/script&gt;
  &lt;header class="wrapper"&gt;
    &lt;nav&gt;
      &lt;div class="container"&gt;
        &lt;!-- Start: Navigation --&gt;
        &lt;div&gt;
          &lt;h1&gt;Main title&lt;/h1&gt;
          &lt;ul&gt;
            &lt;li&gt;Link 1&lt;/li&gt;
            &lt;li&gt;Link 2&lt;/li&gt;
            &lt;li&gt;Link 3&lt;/li&gt;
            &lt;li&gt;Link 4&lt;/li&gt;
            &lt;li&gt;Link 5&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- End: Navigation --&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;!-- Start: Page content --&gt;
  &lt;main&gt;
    &lt;section class="module parallax parallax-1"&gt;
      &lt;div class="container"&gt;
        &lt;h1&gt;Block title&lt;/h1&gt;
        &lt;div class="arrowcontainer"&gt;
          &lt;div class="arrowtext"&gt;Supportive text&lt;/div&gt;
          &lt;div class="arrow"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="module content"&gt;
      &lt;a name="concept"&gt;&lt;/a&gt;
      &lt;div class="container"&gt;
        &lt;h2&gt;Block subtitle&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="module content"&gt;
      &lt;a name="news"&gt;&lt;/a&gt;
      &lt;div class="container"&gt;
        &lt;h2&gt;Block subtitle&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/main&gt;
  &lt;!-- End: Page content --&gt;
  &lt;!-- Start: Footer --&gt;
  &lt;footer class="module parallax parallax-2"&gt;
    &lt;div class="container"&gt;
      &lt;div class="footer-bottom"&gt;
        &lt;ul&gt;
          &lt;li&gt;Link 1&lt;/li&gt;
          &lt;li&gt;Link 2&lt;/li&gt;
          &lt;li&gt;Link 3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  &lt;footer class="wrapper"&gt;
    Last updated span
  &lt;/footer&gt;
  &lt;!-- End: Footer --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The HTML-snippet above is surrounded by these lines of code (as they shouldn't be added in the snippets texteditor).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js"&gt;
  &lt;head id="Head1"&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;Testing&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form name="form1" method="post" action="./" id="form1"&gt;
      &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxMw9kFgJmD2QWAgIDD2QWAgIDDw8WAh4EVGV4dAUVcmV2aXNlZCAxNjAxLjEuMS4wMTAwZGRkfaEsWaMfAzoF2J+iiXEZuLql9BHgAUKPamIAH6P8sG0=" /&gt;
      &lt;div&gt;
      &lt;/div&gt;
  
      The snippet above...
  
      &lt;div&gt;
        &lt;input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" /&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am using <code>modernizr-3.5.0-custom.min.js</code> with all features and options checked and <code>jquery-3.2.1.min.js</code> (the newest jQuery version avaliable in the snippet viewer is 2.1.1, but they work all the same in this particular matter).</p>