html - 切换侧边栏按钮在 Safari 浏览器中不可见

标签 html css safari

我正在开发一个基于 Bootstrap 4 的网站,它有一个可折叠的侧边栏。

切换按钮在 chrome 和 firefox 中可见,在 windows 和 macos 上都很好。 但它在 macOS 上的 safari 中是不可见的。

我尝试了很多解决方案,比如尝试各种选项,例如:

-webkit-transform: translateZ(0px); 或者 transform-style: preserve-3d;

没有任何运气。

我不想在这里放太多代码,所以我制作了一个代码笔,您可以在其中查看实际行为:https://codepen.io/pen/JqRLKx

关于如何解决这个问题有什么想法吗?

最佳答案

好的,我想我可能已经缩小了您的问题范围。我可以重现你在 Safari 上的内容。

经过大量删除并查看导致问题的行后,我发现 overflow-y: auto 导致了问题。

#sidebar-wrapper {
position: fixed;
left: 21rem;
width: 0;
height: 100%;
margin-left: -21rem;
overflow-y: auto;
background: #fafa;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

现在删除该行将显示下拉项。我不确定您如何解决该问题。如果我找到解决方案,我会更新我的答案 试一试。

编辑

试试这个 JQuery slide toggle menu

关于html - 切换侧边栏按钮在 Safari 浏览器中不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56114568/

相关文章:

html - Logo 调整大小响应式 opencart

javascript - 为什么 Bootstrap 词缀会跳到顶部

HTML5 离线 Appcache 更新未在 Firefox 中显示

html - 换行符在 IE 和 Chrome 中呈现不同

html - IE7 中的偏移量使 div 未对齐

css - 是否可以给 bootstrap btn 打 5 分?

javascript - 如何使我的 .htaccess 文件允许 Safari 和其他浏览器打开 GZIP?

css - 在 Safari 9.1.2 (11601.7.7) 中悬停时 SVG 过渡失败

javascript - 移动 safari : window. pageYOffset/scrollY 看似忽略导航栏高度,即使它滚动

html - 如何将后备字体应用于所有文本,而不仅仅是缺失字符