gmpatzer gmpatzer - 1 month ago 6
CSS Question

Rails Polymer not formatting CSS and Polymer elements correctly until I refresh the page

My polymer elements (such as paper-input) don't load their CSS correctly whenever I first load a page. For example: Before reloading

I have to refresh the page everytime for it to display correctly. This is how the page is supposed to look like:
After reloading

This is the code for the page:

<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {id: "form"}) do |f| %>
<paper-input-container alwaysFloatLabel="false">
<label>Email</label>
<%= f.email_field :email, autofocus: true, 'is':'iron-input' %>
</paper-input-container>

<paper-input-container alwaysFloatLabel="false">
<label>Password</label>
<%= f.password_field :password, autocomplete: "off", 'is':'iron-input' %>
</paper-input-container>

<% if devise_mapping.rememberable? -%>
<paper-checkbox id="rememberme"></paper-checkbox>
<%= f.check_box :remember_me, id: "rememberme", style: "display: none;" %>
<%= f.label :remember_me %>
<% end -%>
<br><br>
<paper-button id="submit">Log in</paper-button>
<% end %>

<hr>
<%= render "devise/shared/links" %>


Is there a way for it to load the CSS correctly on the first time? Or is this issue only present on development?

Answer

It seems like the turbolinks gem is causing these issues. Removing turbolinks resolves the issue.