Rails5で一部ページにおいて初回訪問時のみ画像が表示されない

Question

Ruby : 2.3.1
Rails: 5.2.2

Railsでコミュニケーションアプリを作っていますが奇妙なバグに遭遇してます。

詳細

・初回訪問時のみ発生します。
・バグはこのページのみ起きていて他のページでは問題なく表示されます。
・バグ発生後、以下のいずれかを行えばimageは正常に表示されます。

1. 別のページを経由して再度ページ訪問する
2. ページ更新
3. chrome consoleの「select an element in the page to inspect it」を押す

※3がかなり奇妙です。

以下は、初回訪問時のバグ発生時と正常時のスクショです。

知りたいこと

data-turbolinks="false"をaタグにセットすれば問題なく画像は表示されますが、できればturbolinksは残したいです。
どなたかこのバグに心当たりある方いませんか？

コードの追記

以下かなり抜粋しておりますがコードの追記となります。

show.html.erb

<%= render "diary", diary: @diary, role: "diary_show", comments: @comments %>

_diary.html.erb
diary箇所を部分テンプレートで出しています

<div class="comment-area">
  <div class="display-comments">
    <% if role == "diary_index" %>
      <%= render partial: "diary_comments", collection: diary.comments, as: :comment, locals: {diary: diary} %>
    <% else %>
      <%= render partial: "diary_comments", collection: comments, as: :comment, locals: {diary: diary} %>
    <% end %>
  </div>
</div>

_diary_comments.html.erb
diaryのcommentをcollectionで出しています
ここのimage_tagでユーザー画像がある場合とない場合を出し分けていますが、バグにより両方共表示されません。

<div class="message-user-image">
  <% if comment.user.user_image.blank? %>
    <%= image_tag 'user-blue.png', class: 'circle', alt:"user photo" %>
  <% else %>
    <%= image_tag(comment.user.user_image.image.thumb.url, class: 'circle', alt:"user photo")  %>
  <% end %>
</div>

Comments

[maisumakun]

画像はどのようにして表示していますか？（Turbolinks関連となると、JavaScriptでの表示ということでしょうか）

そのあたりのソースについても記載をいただければと思います。

[broly]

maisumakun様
お世話になっております。コードを追記致しました。
また、表示自体にjavascriptは使用していないのですが、表示以外で使っている可能性もあるので引き続き調べてみます。

[broly]

maisumakun様
全てのjavascriptをオフにしたらバグがなくなりました。
問題の原因はrailsでなくjavascriptだったようなので引き続き該当箇所がどこにあるのかを調査してみます！

Answer 1

バグの原因を修正したわけではないので解決とは言えませんが、力技で何とかなりました。
maisumakun様の助言を元にjavascriptを中心に調査したところ以下のような結果になりました。

• ブラウザのjavascriptをオフにするとバグはなくなる
• applocation.js以外のjavascriptファイルを全て消してもバグは残る

やはり原因はturbolonksのような気がしましたが、turbolonksをオフにするのは嫌だったので調査を続行しました。

そこでchrome consoleの「select an element in the page to inspect it」を押すとバグが直る奇妙な事象を元に検証を進めたところ、該当箇所をタップするだけではなく、console自体の表示と非表示を切り替えてもバグが直ることを見つけました。(chromeとsafariで検証)

試しにバグ発生時にwindowのリサイズをしてみたらバグが直りましたので、以下コードを追加したところバグは発生しなくなりました。

setTimeout(function(){
  var width = $('.display-comments').width();
  $('.display-comments').width(width - 1);
},100);

遷移して0.1秒後に、バグ発生箇所の親要素のwidthを1px変化させています。
setTimeoutなしで遷移と同時にwidthを変更してもバグは残ったままでした。

maisumakun様ありがとうございました！