Rails 4 turbolinks cause html canvas to disappear on ipad

StackOverflow https://stackoverflow.com/questions/19469287

Question

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

Was it helpful?

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

OTHER TIPS

I finally worked out how to get skrollr to work with turbolinks or any other pushstate method after hours of fiddling.

Embed and call the skrollr function as normal:

$(window).ready(function() {
var s = skrollr.init(); 
});

Then use skrollr.init().refresh(); on the new page or load page function for your pushstate plugin. So with turbolinks use this:

$(document).on('page:load', function () {
skrollr.init().refresh(); 
});

Hopefully this will save someone a lot of time, it should be referenced in the skrollr docs especially because there's a gem for it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top