Version 10 breaks if two html autofocus tags are present in form
ben-gy opened this issue · 5 comments
Summary
So I debugged a strange issue that is difficult to replicate so I thought I'd share it here if not only to put a public record of it for anyone experiencing the same issue, but am hoping that this might help guide a future version of autoprefixer that doesn't resulting the same experience. On one page only (my user signup page) I would get a client-side error created by Chrome and Safari.
Also, it's worth noting I'm still not 100% certain that what I have I perceived to be the issue is the full story but it's all I've go to too from based on my efforts resulting in not being able to reproduce the error.
Error discovery
After updating to v10 I occasionally got a browser error message "a problem occurred with this webpage so it was reloaded" on Safari and in Chrome a similar message (my apologies, because the issue was on production I didn't stop to record the exact phrasing). The problem was the reload was in a perpetual loop until the browser halted the whole page making it entirely unusable to an end-user. This error occurred only on my user signup page.
Note, these are client-side error messages generated by the browser and if your users are having this issue it will not show up as an application-level error nor does it appear to be traceable in your application logs (using log-level :Info at least). Furthermore, the error is extremely hard to reproduce (I'm using a CDN so I suspect this may have been stepping in occasionally) but I successfully reproduced it in chrome and safari, in both normal and incognito modes on both Mac (Catalina: 10.15.6) and iPhone (iOS: 14), but only on staging/production.
Solution discovery
I eventually discovered I had two autofocus: true tags on my registration page. After removing the second autofocus reference and pushing to production the error was no longer reproducible.
My Rails setup
- My Gemfile is: https://gist.github.com/ben-gy/346fa29ab4495c2f49f95196f3942616
- My Gemfile.lock is: https://gist.github.com/ben-gy/85fd60ab599d02e501c3f857583dc18b
- I am using client-side validation on the sign up page: https://github.com/DavyJonesLocker/client_side_validations-simple_form
Additional steps taken
- To be extra safe I've bumped my asset version in assets.rb
- To be extra extra safe I've since locked autoprefixer-rails to major version 9
Sadly, I can hardly see what you had experienced has anything to do with this gem.
a problem occurred with this webpage so it was reloaded
This indicates a bug in the browser, or the client has limited resources. (not enough memory)
I eventually discovered I had two autofocus: true tags on my registration page. After removing the second autofocus reference and pushing to production the error was no longer reproducible.
autofocus is a HTML tag attribute, it has nothing to do with the assets pipeline, hence nothing to do with this gem.
This gem only adds vendor prefix for your CSS files.
I suspect this has more to do with your Javascript
Maybe your JS, your dependencies' JS or your framework's JS tries to find element with autofocus, and does something funny with it.
Can you check if you have upgraded other gem when upgraded autoprefixer-rails?
Thanks
Autoprefixer was the only thing that changed, which is why I put this feedback in here. I agree that it doesn’t sound related but given nothing else changed on my front end and then when I stepped back a version for this gem everything worked again I thought I would report it anyway.
If no further action is required / recommended - feel free to close this issue :)
Will - will post shortly 👍
Close this issue for inactivity, please reopen if needed.