Search code examples
javascriptruby-on-railsipadcanvasturbolinks

Rails 4 turbolinks cause html canvas to disappear on ipad

I am using Ruby on Rails 4. -- app/views/layouts/application.html.erb contains:

<!DOCTYPE html>
<html>
  <head>
    <%= javascript_include_tag "application" %>
  </head>
  <body>
    <canvas id="can"></canvas>
    <%= link_to "link to here", "#" %> 
    <button onclick="task()" >make square</button>
  </body>
  <script>
    function task(){
      var c = document.getElementById("can");
      var ctx = c.getContext("2d");
      ctx.fillStyle="#FF0000";
      ctx.fillRect(0,0,c.width,c.height);
    }
  </script>
</html>

--app/assets/javascripts/application.js contains:

//= require turbolinks

This program works fine on my workstation in Chrome and Firefox. On my ipad in Safari, however, when I click the link I can no longer make the canvas reappear by clicking the button. The button works when I reload the page. If I remove the 4th line of application.html.erb then Safari behaves like Chrome and the button works at all times. However, without line 4, the link no longer causes the box to go away.

This is my first rails project. I am at a complete loss here and any help, insights, clues, or suggestions would be greatly appreciated. Thank you in advance. --laertiades

Solution

  • I think turbolinks has some bugs.

    I was trying to implement skrollr on my website,

    and turbolinks was causing some kind of bug that prevented skrollr from

    working correctly upon reload/back command.

    You're probably having the same issue that I had.

    Put some console.log statements, and see if your page is instantly being loaded twice.

    The second time it's being loaded, it shows the logs, but it doesn't show the line numbers.

    I still haven't figured this out yet, so I just removed turbolinks from my application.

    Turbolinks "makes following links in your application faster",

    so it is not a necessary feature that you must keep in your application.

    You can simply remove the line

    //=require turbolinks