如果边框半径 [OSX] Chrome 48 添加滚动条答案

【问题标题】：Chrome 48 adds a scrollbar if border-radius [OSX]如果边框半径 [OSX] Chrome 48 添加滚动条
【发布时间】：2016-05-06 01:50:01
【问题描述】：

最近我将 Chrome 更新到 v48 并遇到了一个奇怪的错误。所以我有一个非常简单的标记，带有 <pre> 标记和一些基本样式

pre {
  border: 1px solid #dedede;
  overflow: auto;
  width: 90%;
  margin: auto;
  margin-top: 20px;
  border-radius: 3px;
  background-color: #f7f7f7;
}

现在的问题是，如果我将border-radius 用于pre 标签，Chrome 会强制显示水平滚动条。如果我删除 border-radius 属性，水平条将消失并按预期重新出现在滚动条上。

Demo

Demo 2 （正确的行为，但前提是我删除了border-radius [for mac users]）

只是为了澄清一下在 Mac OSX Yosemite 上，所以滚动条在您开始滚动之前不会显示（不确定 Windows 是否会做同样的事情，我确定不会）。

其他详情：
Mac Pro 视网膜
操作系统：OSX Yosemite ^v10.10.5
Chrome 版本：48.0.2564.97 ^{（64 位）}

因此，问题是，如果我使用 border-radius，为什么 Chrome 会强制滚动条？只有在用户开始滚动时，如何才能将旧功能恢复到原来显示滚动条的位置。如果我展开它们，这也会与我在 pre 标记上的下拉菜单和滚动条重叠这些菜单也会混淆，但这只是这个问题的上下文。

【问题讨论】：

在 47 和 49 (canary) 滚动条总是为我显示有或没有边界半径，如果它需要溢出 (osx El Capitan)
@DominicTobias 以前在 47 上对我很有效，这个问题是 48 特有的。
@TylerH 这肯定是 OSX 相关的。
先生。外星人，我在版本 48.0.2564.97（64 位）中也遇到了这个问题。我在 2014 年中期有一台装有 Yosemite 的 MacBook Pro，我刚刚执行了最新的系统更新。我注意到它只发生在浏览器窗口位于外接显示器上时。如果我将窗口移动到我的 macbook 屏幕上，滚动条会按预期消失。
Chrome 48.0.2564.97（64 位）Mac OS 10.11.3 上的同样问题——即使在某些 div 上没有边框半径。看起来它也可能影响position: fixed 元素。

标签： css macos google-chrome

【解决方案1】：

使用 <pre> 标记本机应用 css 属性“white-space: pre”。除非使用物理中断，否则这会保留空白。您应该使用不同的标签或将“空白：正常”应用于您的标签。

【讨论】：