JQuery 移动列表视图 w/collapsibles 内部面板 – Chrome v67 中的随机额外垂直像素

Question

在最近的 Chrome v67 更新后，我发现最近出现了一些奇怪的行为（目前已在 Mac El Cap 和 Windows 10 上进行了测试）。

使用 JQuery 移动版，我在面板小部件中嵌套了一些可折叠项，用作菜单。这在一段时间内完美无缺地工作，但是当我暂时偏离轨道然后回到项目时，我注意到现在，在 Chrome 中（v67 于 5 月下旬发布，当时我不在项目中），打开菜单然后展开可折叠项时，我在某些菜单项之间随机获得 1px 垂直 spaces（白色水平线）。无法预测哪些项目会受到影响，甚至检查它们也很困难，因为额外的 space disappears/resolves 在翻转或打开检查器时。

到目前为止，我在 Safari 或 FF (Mac) 和 Chrome v66 (Windows) 中都没有看到这种行为。虽然我目前无法进行更广泛的跨浏览器测试，但从我所看到的情况来看，我假设最新 Chrome 更新中的某些内容导致了此问题。

当浏览器的视图稍微缩放 in/out 时，我有时会看到类似的不可预测的间距问题，但我已经确认我是以实际大小查看的。

它似乎不是 CSS 问题，因为在 space 问题在翻转时解决后，我没有看到元素的计算值发生变化。似乎全世界都存在某种 Chrome 渲染问题。

我知道这是一组相当特殊的情况，但有没有其他人在 Chrome v67 中经历过类似的事情，如果有，你找到解决方法了吗？

这里有一个 fiddle 演示了这种奇怪的行为（打开 "List 2 of 6" 时最容易看到）：

https://jsfiddle.net/halfacre/p349ghvf/5/

编辑：这个问题似乎源于我的 JS 中的数学运算。该脚本旨在将选定的子菜单平滑滚动到视口顶部（因为这些是长列表，没有视觉提示很容易丢失），并且在最新的 Chrome 更新之前一直运行良好。我在下面包括所说的 JS。由于我不是程序员，也不是特别擅长数学，所以这个脚本有点让我眼前一亮……这可能是由于余数或舍入问题造成的吗？

$(document).ready(function() {
  $(document).on("collapsibleexpand", ".ui-collapsible", function(e) {
    var self = $(this), 
        menu = $("#mainmenu"),
        pageY = $(document).scrollTop(),
        content = $(this).children(".ui-collapsible-content");
    content.hide();
    content.slideDown({
        duration: 300,
        step: function(now, fx) {
          if (fx.prop == "height") {
            var pct = ((100 * now) / fx.end),
              itemTop = $(self).offset().top,
              menuScrollTop = $(menu).scrollTop(),
              amt = (itemTop - pageY) / 100 * pct;
            menu.scrollTop(menuScrollTop + amt);
          }
        }
      }
    );
    e.stopPropagation(); // don't bubble up
  });

  $(document).on("collapsiblecollapse", ".ui-collapsible", function(e) {
    var content = $(this).children('.ui-collapsible-content');
    content.slideUp(300);
    e.stopPropagation(); // don't bubble up
  });
});

感谢您的浏览。

编辑 2：我所看到的截图：

Answer 1

如果我没记错的话，我相信问题是如何 zero-pad JQM collapsible，即菜单面板中的 listview 和 collapsible heading .

首先，请记住 JQM 通过添加一些 DOM 内容和相应的 CSS [=51] 来动态增强具有属性 data-role 的每个 div =].

您可以通过搜索 mobile.collapsible 查看 JQM 源代码，您会发现 _enhance() 函数中的小部件实例化发生了什么，以及当您单击 [= 中的可折叠标题时发生了什么=20=]函数。

现在，我坚信 JQM 类和您的 CSS 风格之间存在冲突：

li, ul {padding:0!important; }
h3{ margin:0!important;}

但是，遗憾的是，正如您所说，我无法向您解释为什么会发生这种情况，只能解释最新的 Chrome 版本。我还注意到这些随机细线，属于 panel-content 背景。

我建议重置面板内部和内容之间的 space：

.ui-panel-inner { padding: 0 !important; }
.ui-panel-inner .ui-collapsible-content { padding: 0 !important; }
.ui-panel-inner .ui-listview { margin: 0 !important; }
.ui-panel-inner .ui-listview > .ui-li-static { padding: 0 !important; }
.ui-panel-inner .ui-listview > li h3 { margin: 0 !important; }

我没有定义新规则，而是重写了 JQM 样式。现在，我再也看不到任何细的随机线了。

这里是 Fiddle：https://jsfiddle.net/98b4r3w5/ 欢迎任何反馈。

此外：注意事项，如果您需要居中的页面内容和较小的页脚，我会采用相同的方式：

.ui-content { text-align:center; }
.ui-footer .ui-title { padding: 0 !important; }

JQuery 移动列表视图 w/collapsibles 内部面板 – Chrome v67 中的随机额外垂直像素

JQuery Mobile Listviews w/collapsibles inside panel – random extra vertical pixels in Chrome v67

javascript

google-chrome

removing-whitespace

jquery-mobile