Rails app looks different in Safari on production

Question

I've found a very strange bug in my application. In development, on my local machine, everything looks perfect in Safari, Chrome and Firefox. But on staging with production environment in Safari the app looks very ugly and perfect in Chrome and Firefox. Other thing that some of the pages looks good in Safari, but I can't figured what is the problem. I must say now that we use Heroku for deployment, I have strong feeling that this fact is important.

Here is my production config (config/environment/production.rb)

Rails.application.configure do
  config.cache_classes = true
  config.eager_load = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
  config.serve_static_assets = false
  config.assets.js_compressor = :uglifier
  config.assets.compile = true
  config.assets.digest = true
  config.log_level = :debug
  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify
  config.log_formatter = ::Logger::Formatter.new
  config.active_record.dump_schema_after_migration = false
end

Here is my application config (config/application.rb):

require File.expand_path('../boot', __FILE__)

require 'rails/all'

Bundler.require(*Rails.groups)

module MyApp
  class Application < Rails::Application
    config.time_zone = "West Central Africa"
    config.autoload_paths << Rails.root.join('lib')
    config.i18n.fallbacks = true
  end
end

I use Rails 4.2.5 and gem rails_12factor in production. I've read Heroku tutorial about assets and this answer https://stackoverflow.com/a/27626661/1771495 but they don't help me.

Any help is appreciated!

Use Safari's dev tools to look at the working and non-working one side by side. You should quickly see that one of them is getting styles from a different place, or trying to get them from a missing stylesheet or something. — Max Williams, Apr 19 '16 at 11:17

score 1 · Answer 1 · answered Apr 19 '16 at 11:54

1

This maybe isolated for the Safari browser.
I am not sure but you may want to look at "Compatibility Mode" of the view pages of the browser.

I had one experience with the compatibility view turned on for Firefox which made my production server look bad.

answered Apr 19 '16 at 11:54

Jeffrey M Castro

367
3
12

Unfortunately, your advice didn't help me. The reason was not in compatibility mode. – Tetiana Chupryna Apr 21 '16 at 13:19

score 0 · Accepted Answer · answered Apr 21 '16 at 13:25

The reason of the problem was in Heroku. I ran the app in production environment on my local machine and all pages looked fine. I didn't manage to identify exact problem, but it looks like Heroku failed assets compilation. So I've moved assets to AWS S3 with assets_async gem and now everything works fine and fast by the way.

Rails app looks different in Safari on production

2 Answers2