Prevent Chrome from jumping to the top of the page on remote forms

[adeeb1]

Rails version: 5.2.2 Google Chrome version on Windows 10: 79.0.3945.88 (Official Build) (64-bit)

Whenever I submit a remote form that manipulates the DOM and contains an icon from Font Awesome, the page jumps to the top on Google Chrome. I am not using Turbolinks, so I presume the jump is because it's trying to refresh the page. This Stack Overflow post I wrote describes the issue with some code snippets.

I've tried changing the mutateApproach configuration setting at the end of application.js like so:

FontAwesome.config.mutateApproach = 'async';

However, this has not fixed the issue. One alternative for me is to install using webfonts, but I would prefer not to lose the ability to use animations or layered icons.

Do you have any suggestions for how to solve the issue? This jump creates a poor user experience on my site, which has a large percentage of Google Chrome users.

[adeeb1]

Update: I installed Font Awesome 5 as webfonts with CSS, and everything is working great, even animations. That is my workaround, but the issue with the JavaScript still stands.

[tomkr4l]

Hello @adeeb1 , I'm glad you solved your issue with webfont version of fonts. Hovewer, this gem only works as a wrapper around Font-Awesome assets and it's main purpose is to provide fa_icon helpers to generate icon html tags and nothing more.

If you have problems with javascript causing some unwanted behavior, you should create an issue directly on [FontAwesome] (https://github.com/FortAwesome/Font-Awesome). Hope this helps.

[simmerz]

I've narrowed this down. It's not Font Awesome itself and it is this package.

When I include *= require font_awesome5 in my application.scss I get a jump to the top. When I don't, it works fine.

I've included fontawesome directly using their CDN and confirmed this require isn't needed

[tomkr4l]

Looks like that this part will cause problem:

.fontawesome-i2svg-pending body {
  display: none;
}

I'll try to replicate and fix this issue.

[tomkr4l]

@adeeb1 @simmerz Could you please provide example of form which causing you problems? I've tried this sample code and everything works as expected (I haven't noticed any jumps at all). I've used latest version 1.1.0:

= form_for :test, remote: true, id: 'test_form' do |f|
  - 50.times do |i|
    = f.label "name#{i}".to_sym, "Name#{i}"
    = f.text_field "name#{i}".to_sym
    = fa_icon 'trash'
    %br
  = link_to fab_icon('facebook'), root_path, remote: true
  %br
  = f.submit "Send", id: 'test'

:javascript
  $(document).ready(function() {
    $('#test_form').submit(function(e) {
      e.preventDefault();
      console.log('submit');
    })

    $('#test').on('click', function(e) {
      e.preventDefault();
      console.log('click');
    })
  })

[simmerz]

@tomkra the issue is when an icon comes back in the response from the remote form/link. Your test doesn't test for an HTML fragment being returned and rendered

[tomkr4l]

@simmerz Ahh thanks for clarification. I'm on it.

[tomkr4l]

Ok I've simulated and fixed the issue. Jump to the top was caused by css code I've mentioned above. This css was present to prevent blinking of icons when used with turbolinks, which now seems to be resolved on FA side.

I've removed unnecessary code and issue should now be fixed in version 1.1.1. Maybe you will have to recompile your assets for the change to take effect.