Bootstrap卡片内下拉菜单在Safari无法点击悬停，Firefox正常

• Firefox中，卡片内的Bootstrap下拉按钮显示及交互均正常；但在桌面版Safari中，下拉菜单超出卡片的部分无法被悬停或点击。
• 将下拉菜单移至卡片外部后，所有交互功能恢复正常。

问题截图 #

悬停第一个菜单项（正常状态）：

悬停第二个菜单项（失效状态）：

复现代码 #

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />
</head>
<body>
<main role="main" class="container">
<div id="content">
<div class="card-columns">
<div class="card bg-light">
<div class="card-body">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Manage</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者kostrykin