mirror of
https://github.com/discourse/discourse.git
synced 2024-11-23 09:26:54 -06:00
FIX: Avoid flash-of-unstyled-content in Safari with bug workaround (#25462)
Safari has a bug which means that scripts with the `defer` attribute are executed before stylesheets have finished loading. This is being tracked at https://bugs.webkit.org/show_bug.cgi?id=209261. This commit works around the problem by introducing a no-op inline `<script>` to the end of our HTML document. This works because defer scripts are guaranteed to run after inline scripts, and inline scripts are guaranteed to run after any preceding stylesheets. Technically we only need this for Safari. But given that the cost is so low, it makes sense to include it everywhere rather than incurring the complexity of gating it by user-agent.
This commit is contained in:
parent
df2f63cf74
commit
2457553d0a
26
app/helpers/defer_script_helper.rb
Normal file
26
app/helpers/defer_script_helper.rb
Normal file
@ -0,0 +1,26 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
# Helper to render a no-op inline script tag to work around a safari bug
|
||||
# which causes `defer` scripts to be run before stylesheets are loaded.
|
||||
# https://bugs.webkit.org/show_bug.cgi?id=209261
|
||||
module DeferScriptHelper
|
||||
def self.safari_workaround_script
|
||||
<<~HTML.html_safe
|
||||
<script>#{raw_js}</script>
|
||||
HTML
|
||||
end
|
||||
|
||||
def self.fingerprint
|
||||
@fingerprint ||= calculate_fingerprint
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def self.raw_js
|
||||
"/* Workaround for https://bugs.webkit.org/show_bug.cgi?id=209261 */"
|
||||
end
|
||||
|
||||
def self.calculate_fingerprint
|
||||
"sha256-#{Digest::SHA256.base64digest(raw_js)}"
|
||||
end
|
||||
end
|
@ -143,5 +143,7 @@
|
||||
<%- if allow_plugins? %>
|
||||
<%= build_plugin_html 'server:before-body-close' %>
|
||||
<%- end %>
|
||||
|
||||
<%= DeferScriptHelper.safari_workaround_script %>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -87,6 +87,7 @@ class ContentSecurityPolicy
|
||||
end
|
||||
|
||||
sources << "'#{SplashScreenHelper.fingerprint}'" if SiteSetting.splash_screen
|
||||
sources << "'#{DeferScriptHelper.fingerprint}'"
|
||||
end
|
||||
end
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user