html overflow-x must be hidden to prevent accidental x-scroll on small screens. This is more apparent with touch screens, where the user often gestures diagonally instead of a true vertical gesture.
Bootstrap break point for tablet portrait 768 keeps the row intact, so it's not appropriate to have off-canvas elements at that width. Custom off-canvas.css should be breakpoint 767px
