Question

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

使用JQuery Mobile，我将一些可折叠的嵌套在用作菜单的面板小部件内。在一段时间内，它可以正常工作，但是当我暂时偏离轨道然后回到项目时，我注意到现在在Chrome（其中v67于5月下旬发布，而我不在项目中）时，我正在在打开菜单然后展开可折叠菜单时，某些菜单项之间的垂直间距为1px（白色水平线）。无法预测将要实施的项目，甚至检查也很困难，因为多余的空间会在翻转或打开检查器时消失/解决。

到目前为止，我在Safari或FF（Mac）和Chrome v66（Windows）中都没有看到此行为。虽然目前我无法进行更广泛的跨浏览器测试，但据我所知，我的工作是在假设最新的Chrome更新导致此问题的情况下进行的。

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

这似乎不是CSS问题，因为在空间问题解决后，我看不到元素的计算值发生变化。全世界似乎都存在某种Chrome渲染问题。

我意识到这是一组相当具体的情况，但是其他人在Chrome v67中是否经历过类似的事情，如果是的话，您是否找到解决方法？

以下是一个小提琴，它演示了这种奇怪的行为（打开“清单2之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

如果我在这里没记错，我相信问题是如何对JQM collapsible（即，菜单面板内的listview和collapsible heading）进行零填充。

首先，请记住，JQM通过添加一些DOM内容和相应的CSS类来动态增强每个具有属性div的{{1}}。

您可以通过搜索data-role来查看JQM源代码，您将在mobile.collapsible函数中找到小部件实例化时发生的情况，以及单击{{1}中可折叠的标题时发生的情况}}功能。

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

_enhance()

但是，令人遗憾的是，我无法向您解释为什么仅您使用最新的Chrome版本会如您所说发生这种情况。我还注意到了这些细小的随机线，它们属于_handleExpandCollapse()背景。

这是我的建议，以重新设置面板内部和内容之间的空间：

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

我没有定义新规则，而是覆盖了JQM样式。现在，我再也看不到任何细线了。

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

此外：除了注释，如果您需要居中的页面内容和较小的页脚，我将以相同的方式进行操作：

panel-content

面板内部带有可折叠的JQuery Mobile Listviews – Chrome v67中的随机多余垂直像素

1 个答案: