You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I discovered that simply adding the switch attribute to the existing Bootstrap switch input will mean that using the input on an iPhone with iOS 17.4 or later will give a satisfying haptic feedback (just like the OS level switches do). The styling remains identical so I see this a minor progressive enhancement and personally I'll add this attribute to my Bootstrap switches moving forward.
I was thinking it could be good to add a small mention about this as a note in the docs? Not necessarily in the example code by default but just a suggestion.
Related sidenote: For anyone interested, you can use native input switches on Safari with default appearance too for a more iOS/macOS like switch but retaining Bootstrap accent color and height. Using native switch appearance (with -webkit-appearance: auto;) has advantage of working with system accessibility settings like 'Differentiate without color' and 'Prefers Higher Contrast'. Blog Post / CodePen Demo.
Motivation and context
This is a minor progressive enhancement and personally I'll add this attribute to my Bootstrap switches moving forward and think other users would be interested in doing so. There are no downsides to using it.
The text was updated successfully, but these errors were encountered:
Prerequisites
Proposal
I recently did some deep-dive research into using Safari's native switch input (which has been available some 17.4) with Bootstrap CSS.
I discovered that simply adding the switch attribute to the existing Bootstrap switch input will mean that using the input on an iPhone with iOS 17.4 or later will give a satisfying haptic feedback (just like the OS level switches do). The styling remains identical so I see this a minor progressive enhancement and personally I'll add this attribute to my Bootstrap switches moving forward.
Codepen Example (test on an iPhone):
https://stackblitz.com/edit/bootstrap-switch-native?file=index.html
I was thinking it could be good to add a small mention about this as a note in the docs? Not necessarily in the example code by default but just a suggestion.
Related sidenote: For anyone interested, you can use native input switches on Safari with default appearance too for a more iOS/macOS like switch but retaining Bootstrap accent color and height. Using native switch appearance (with
-webkit-appearance: auto;
) has advantage of working with system accessibility settings like 'Differentiate without color' and 'Prefers Higher Contrast'. Blog Post / CodePen Demo.Motivation and context
This is a minor progressive enhancement and personally I'll add this attribute to my Bootstrap switches moving forward and think other users would be interested in doing so. There are no downsides to using it.
The text was updated successfully, but these errors were encountered: