The issue & environment
Utilizing Bootstrap 4 via CDN, a problematic scenario has arisen with the Carousel feature on iOS devices. An identified bug persists in this aspect of Bootstrap, acknowledged with a potential resolution available through github #28558; however, this fix remains unreleased. Though introduced as of 27 March, we await the arrival of Bootstrap v4.4.0, housing the solution, which is regrettably devoid of any firm release date.
A brief summary of the cause
Post-SWIPE interaction on iOS devices triggers an anomaly within Bootstrap's carousel.js, failing to reset an essential internal parameter (touchDeltaX). Consequently, ensuing taps or clicks inadvertently lead to additional undesired swipes.
The proposed fix
An observation suggests that engaging a vertical touch maneuver to prompt scrollbar visibility appears to nullify the said undesirable action, hinting at a plausible workaround.
Initially assumed as a straightforward task, potentially requiring minimal code adjustment, the implementation seems to have hit a snag. The challenge lies in programmatically manipulating scrollbars specifically on iOS devices.
function scrollY() {
if (hasTouchscreen){
window.scrollBy(0,1);
window.scrollBy(0,-1);
}
}
A functional CodePen (referenced below) illustrates our simplified test case. Despite slight modifications for compatibility within the CodePen environment, complete functionality mirroring our development setting remains elusive. Nonetheless, successful operation observed on iOS devices, effectively highlighting the unresolved bug awaiting a viable workaround.
How to reproduce the issue (iOS)
To simulate the glitch, engage the PLAY/PAUSE/STOP buttons before navigating using the carousel controls (NO swiping!). Subsequently, repeat the process, opting for swipe gestures instead of the control buttons. The aftermath reveals an inadvertent repetition of the last swipe direction upon interacting with the PLAY/PAUSE/STOP functions.
The "manual" workaround (which works!)
Prompted by empirical evidence suggesting a vertical gesture alleviates the issue post-horizonal swipe actions: attempt a vertical swipe following a horizontal one to observe temporary scrollbar activation. This intervention prevents further undesired swipes when interacting with the aforementioned buttons, though impractical for live implementation due to user experience considerations.
Tried so far
Concluding the JavaScript segment, the function scrollY() executes window.scrollBy(0,1); and window.scrollBy(0,-1); with intent to manipulate scrollbars. Albeit effective in testing environments, iOS fails to reflect similar alterations within its scroll interface.
Note: Observable behavior confirms the routine efficacy within test scenarios, where each swipe illuminates the scrollbars fleetingly, contrasting non-illumination linked to control button usage!
Exhaustive searches across platforms like StackOverflow yielded no tangible solutions addressing the dilemma - persisting complexities prevent me from resolving this matter :(
[ Code & req result ]
CodePen:
Bootstrap carousel with embedded YouTube videos + control buttons & touchswipe
Note: While this CodePen effectively operates on iOS devices, anomalous behavior surfaces concerning the functionality of PLAY/PAUSE/STOP buttons within our desktop testing realm. However, the incongruity appears exclusive to CodePen, proving insignificant given the apposite performance witnessed on intended iOS platforms.
Required result
Innovative measures are requisite to instigate programmatic recalibrations within iOS scrollbars, thus facilitating a course correction for Bootstrap's carousel.js. These endeavors aspire to circumvent existing bugs persisting until the eventual rollout of Bootstrap v4.4.0 (or v5).