Whenever I first load a page, my polymer elements (like paper-input) fail to load their CSS properly. Here is an example of how the page looks before and after refreshing: https://i.sstatic.net/vsIpE.pnghttps://i.sstatic.net/YAFjP.png
Below is the code snippet 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" %>
I'm wondering if there is a way to ensure the CSS loads correctly on the first attempt, or if this issue is limited to development. Any insights would be appreciated.