v5 Offcanvas: Not visible on page load with show class
Created by: iainhallam
Operating system and version: Windows 10 Browser and version: Firefox 86.0 and Chome 89.0.4389.82
I'm trying out the new offcanvas component, which is great, but when I have show
as part of the initial classes, the menu doesn't open on page load. It may be something I'm doing wrong, but I think I've followed the setup correctly for the current Bootstrap from GitHub.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Offcanvas test</title>
</head>
<body>
<div id="app-menu" class="offcanvas offcanvas-start show">
<h2>Offcanvas</h2>
</div>
<button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#app-menu">
Open menu
</button>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
Expected behaviour: On load, the offcanvas is opened, and the document obscured by the overlay.
Actual behaviour: No offcanvas shown. Clicking the button the first time does nothing (it toggles the show
class off), then the second time it shows the offcanvas and the document is obscured.
Moving the script tag to the top of the document or into the head
seems to make no difference.