CSS背景标题在移动浏览器中不稳定

Question

有人可以查看此页面，看看您是否知道如何解决此问题。

Original page link

此页面适用于桌面Chrome和Firefox浏览器。它甚至适用于开发人员预览，并可响应移动480px。

但是，如果您在移动设备或平板电脑上查看此页面，则标题背景和模糊不稳定。不对齐，不会像在桌面上那样滚动图像。

我的猜测是移动设备上不支持某些CSS。是这种情况吗？

请帮忙解决这个问题。 感谢

以下是JS Fiddle

$("input[name='rad-test-area']").on("change", function() {
    $("#h2-test-area a.ui-collapsible-heading-toggle").text("new text");
});

Answer 1

我不是专业人士，但是当我看着你的CSS时，我想也许固定的高度可能是你的问题（.navbar）本身的边缘问题，我没有看到任何针对移动设备调整它的特定代码。

 .navbar {
   position: relative;
   min-height: 50px; */
   margin-bottom: 20px; */
   border: 1px solid transparent;
}