Here we are facing issue, which is mentioned below: On https://johnsoncontrols.com/, tapping the blue “Scroll to Top” button (up arrow icon) causes the entire page to reload instead of smoothly scrolling back to the top. This issue occurs only on physical iOS devices and is reproducible across multiple models and iOS versions. Similar behavior is rarely/occasionally seen in Chrome on iPhone and some Android devices. Environment • Devices: Any iPhone model, we are tested on available models like iPhone 12 mini, iPhone 14, iPhone 15 • iOS Versions: Latest stable releases • Browser: Safari (WebKit) • Network: Both Wi-Fi and cellular tested • Additional Occurrences: Rarely reproduced on Chrome (iPhone, Narzo Android) • Occurs only on physical devices (not observed in Simulator)
Steps to Reproduce
- Open Safari on a physical iPhone.
- Navigate to https://johnsoncontrols.com/.
- Scroll down until the blue “Scroll to Top” button appears on the right side.
- Then tap on ‘Scroll to top’ button.
- The page reloads instead of scrolling to the top.
Expected Result Tapping the Scroll to Top button should smoothly move the user to the top of the page without reloading.
Actual Result Safari reloads the entire page when the button is tapped.
Troubleshooting Done • Replaced # with javascript:void(0) in the button’s anchor tag • Tested with e.stopPropagation() • Switched button position from fixed to sticky • Tried overflow-y: scroll; and -webkit-overflow-scrolling: touch; on body • Updated scrollTop logic to match iOS‑compatible standards.
Questions for Community • Is this a known WebKit issue on physical iOS devices? • Any recommended debugging or profiling steps to better understand the cause? • Are there best practices or example implementations to improve Safari compatibility for scroll to top interactions?