diff --git a/app/javascript/submission_form/areas.vue b/app/javascript/submission_form/areas.vue index 05fe7e2f..d17a728c 100644 --- a/app/javascript/submission_form/areas.vue +++ b/app/javascript/submission_form/areas.vue @@ -157,13 +157,15 @@ export default { const formContainer = root.getElementById('form_container') const container = root.body || root.querySelector('div') - const padding = 64 + const isAndroid = /android/i.test(navigator.userAgent) + const padding = isAndroid ? 128 : 64 + const scrollboxTop = isAndroid ? scrollbox.getBoundingClientRect().top : 0 const boxRect = scrollbox.children[0].getBoundingClientRect() const targetRect = target.getBoundingClientRect() const targetTopRelativeToBox = targetRect.top - boxRect.top - scrollbox.scrollTo({ top: targetTopRelativeToBox - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding, behavior: 'smooth' }) + scrollbox.scrollTo({ top: targetTopRelativeToBox + scrollboxTop - container.offsetHeight + formContainer.offsetHeight + target.offsetHeight + padding, behavior: 'smooth' }) }, setAreaRef (el) { if (el) { diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue index c1d0d8a1..cb41d182 100644 --- a/app/javascript/submission_form/form.vue +++ b/app/javascript/submission_form/form.vue @@ -1113,9 +1113,9 @@ export default { this.minimizeForm() } - const isMobileSafariIos = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit/i.test(navigator.userAgent) + const isMobile = 'ontouchstart' in window && navigator.maxTouchPoints > 0 && /AppleWebKit|android/i.test(navigator.userAgent) - if (isMobileSafariIos || /iPhone|iPad|iPod/i.test(navigator.userAgent)) { + if (isMobile || /iPhone|iPad|iPod/i.test(navigator.userAgent)) { this.$nextTick(() => { const root = this.$root.$el.parentNode.getRootNode() const scrollbox = root.getElementById('scrollbox')