Dropdown list of Humberger button in Rails 7 + Stimulus not correct working in production (mobile) - drop-down-menu

Question

There is no problem in the development environment, but when operating from a smartphone in the production environment, touches other than the hamburger menu button doesn't work correctly.
The code of the stimulus part is as follows.
import { Controller } from "#hotwired/stimulus"
import { useClickOutside,useIntersection } from "stimulus-use"
export default class extends Controller {
static targets = ["toggleable"]
static values = {
mobile: Boolean,
visible: Boolean
}
options = {
element: this.element.querySelector("#dropdown_menu")
}
initialize() {
if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
this.mobileValue = true
} else {
this.mobileValue = false
}
}
connect() {
if (this.mobileValue === true ) {
useClickOutside(this)
useIntersection(this, this.options)
}
}
toggle(event) {
event.preventDefault()
this.toggleableTargets.forEach((target) => {
target.classList.toggle(target.dataset.cssClass)
})
}
appear(entry) {
this.visibleValue = true
}
disappear(entry) {
this.visibleValue = false
}
clickOutside(event) {
event.preventDefault()
if (this.visibleValue === true) {
this.toggleableTargets.forEach((target) => {
target.classList.add(target.dataset.cssClass)
})
}
}
}
The corresponding view file is as follows.
It may be hard to see because it uses tailwind.
<header>
<!-- logo -->
<div class="container mx-auto flex flex-wrap flex-col lg:flex-row lg:pl-10">
<%= link_to '#', class: "flex order-first title-font font-medium items-center text-gray-900 mb-4 md:mb-0" do %>
<%= image_tag 'xxx.png', class: "rounded-full w-10 h-10 bg-indigo-200"%>
<span class="ml-3 text-xl"><%= t'defaults.app_name' %></span>
<% end %>
</div>
<!-- end logo -->
<!-- menu -->
<div data-controller="menu" class="flex-initial relative lg:hidden">
<!-- Dropdown toggle button -->
<div data-action="click->menu#toggle">
<button type="button" class="inline-flex justify-center w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500", id="options-menu" aria-haspopup="true" aria-expanded="true">
<svg viewBox="0 0 100 80" width="30" height="30">
<rect width="100" height="20" rx="8"></rect>
<rect y="30" width="100" height="20" rx="8"></rect>
<rect y="60" width="100" height="20" rx="8"></rect>
</svg>
</button>
</div>
<!-- Dropdown menu -->
<div data-menu-target="toggleable" data-css-class="hidden" id="dropdown_menu" class="hidden absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl">
<%= link_to "#", class: "flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100" do %>
<svg class="w-9 h-9" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
</svg>
<div class="mx-1">
<h1 class="text-sm font-semibold text-gray-700"><%= current_user.name %></h1>
<p class="text-sm text-gray-500 dark:text-gray-400"><%= current_user.email %></p>
</div>
<% end %>
<hr class="border-gray-200">
<%= link_to "#", class: "flex items-center p-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform hover:bg-gray-100" do %>
<span class="mx-1">
<%= t('defaults.profile') %>
</span>
<% end %>
<%= link_to "#", class: "flex items-center p-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform hover:bg-gray-100" do %>
<span class="mx-1">
<%= t('.information') %>
</span>
<% end %>
<%= link_to "#", class: "flex items-center p-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform hover:bg-gray-100" do %>
<span class="mx-1">
<%= t('defaults.list') %>
</span>
<% end %>
<hr class="border-gray-200">
<%= link_to logout_path, data: { turbo_method: :delete, turbo_confirm: t('.logout_confirmation') }, class: "flex items-center p-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform hover:bg-gray-100" do %>
<span class="mx-1">
<%= t('defaults.logout') %>
</span>
<% end %>
</div>
</div>
</header>
The browser of the development environment is chrome, I switched the device toolbar size to mobile and confirmed that it works.
In the production environment, the mobile model was iPhone SE and the browser is safari.
Tap the hamburger button to open the menu, but tapping any other on-screen button doesn't work. (Sometimes, but it's useless)
If you have any idea, please point it out.