80% zoom treated as 100% zoom by paperclip (or possibly imagemagick/mini_magick)

Question

I originally followed the 3rd edition of the ruby on rails tutorial for rails 4 (https://www.railstutorial.org). After the 4th edition of the tutorial came out for rails 5, I updated to rails 5, updated everything in my gemfile to match the changes mentioned in the tutorial, skimmed over the differences in the new tutorial, and made adjustments where necessary to fix things.

Almost everything works, but I tweaked my sample website so that users can upload their own avatars instead of relying on signing up on http://en.gravatar.com to upload gravatars. They used to work exactly as intended, but after updating everything, images at 80% zoom are treated as if they're at 100% zoom. What I mean by that is: I've set medium sized images to be 184x184 pixels. If you zoom your browser view out to 80%, avatars display correctly as 184x184 pixel images. But if you remain at the default zoom level in your browser, 100%, they're 230x230 pixels in size for some reason.

After a lot of testing and tweaking, this is the one problem that I haven't been able to figure out the cause of, or how to fix it. Here are the bits of code responsible for dealing with user avatars, located in app/models/user.rb:

  has_attached_file :avatar, :styles => { :tiny => "60x60!",
      :small  => "100x100!",
      :medium => "184x184!",
      :large => "200x200!" }, :default_url => "/assets/missing_:style.png",
  :convert_options => { :tiny => "-strip",
      :small => "-strip", 
      :medium => "-strip",
      :large => "-strip" }
  validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/
  validates_with AttachmentSizeValidator, attributes: :avatar, less_than: 2.megabytes

  before_post_process :check_file_size
  def check_file_size
    valid?
    errors[:avatar_file_size].blank?
    not avatar.size > 2.megabytes
  end

Here's documentation on the exclamation marks used in the formatting above: http://www.imagemagick.org/Usage/resize/#noaspect (And yep, I've tried using backslashes to preserve the exclamation marks in case that was the issue, but it wasn't.)

And here's my gemfile as it currently stands, though I've changed things several times while trying to figure all of this out:

source 'https://rubygems.org'
  gem 'rails', '5.0.0.1'
  gem 'bcrypt', '3.1.11'
  gem 'faker', '1.6.6'
  gem 'carrierwave', '0.11.2' # Image uploader in test environment
  gem 'mini_magick', '4.6.1' # Image resizing
  gem 'fog', '1.38.0' # Image uploader in production environment
  gem 'will_paginate', '3.1.0'
  gem 'bootstrap-will_paginate', '0.0.10'
  gem 'bootstrap-sass', '3.3.6'
  gem 'puma', '3.4.0'
  gem 'sass-rails', '5.0.6'
  gem 'uglifier', '3.0.0'
  gem 'coffee-rails', '4.2.1'
  gem 'jquery-rails', '4.1.1'
  gem 'turbolinks', '5.0.1'
  gem 'jbuilder', '2.4.1'
  gem 'paperclip', '5.1.0' # For avatar uploading
  gem 'simple_form', '3.2.1'

group :development, :test do
  gem 'sqlite3', '1.3.12'
  gem 'byebug', '9.0.0', platform: :mri
end

group :development do
  gem 'web-console',           '3.1.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '1.7.2'
  gem 'spring-watcher-listen', '2.0.0'
end

group :test do
  gem 'rails-controller-testing', '0.1.1'
  gem 'minitest-reporters', '1.1.9'
  gem 'guard', '2.13.0'
  gem 'guard-minitest', '2.4.4'
end

group :production do
  gem 'pg', '0.18.4'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Has anyone encountered a problem like this before?

Answer 1

I noticed that you are using both paperclip & carrierwave in your project. I would try using either one of them. I would also suggest to use only two styles for start, and later on you can add more when you find out where the problem lies. I'm using this simple example below in my project with paperclip, which may help you:

has_attached_file :avatar, :styles => { :medium => "300x300>", :thumb => "100x100#" }, :default_url => "/images/:style/missing.png"
validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/     

Print out avatar in navbar ( excerpt from partial ):

<li class="avatar"><%= image_tag(current_user.avatar.url(:thumb)) %></li>

CSS:

.avatar{
    background-color: white;
    border: 1px solid #d9d9d9;
    height: 60px;
    width: 60px;
    img { width: 100% }
}

Apparently I cropped thumbnail to 100x100# and I shrinked the avatar with height & width in css to fit my need.

Good read: https://github.com/thoughtbot/paperclip/wiki/Thumbnail-Generation

I hope it helps