Question

此代码与每个桌面浏览器（Chrome，Edge，Firefox，Safari）以及Android上的Firefox完全一样。我没有iOS设备可以测试 - 我很想知道iPhone上会发生什么。

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Background</title>
<style>
html {
    height:100%;
    background:linear-gradient(red, blue) no-repeat fixed;
}
.wrapper {
    min-width:590px;
    padding:20px;
}
.box {
    height:250px;
    width:550px;
    background-color:green;
}
</style>
</head>
<body>
<div class='wrapper'><div class='box'></div></div>
<div class='wrapper'><div class='box'></div></div>
<div class='wrapper'><div class='box'></div></div>
</body>
</html>

现场演示：https://misterneutron.com/lgtest/

＆＃34; no-repeat＆＃34;属性甚至不是必需的，但只是使这个演示更加清晰。简而言之，它提供了一个填充视口的红色到蓝色线性渐变背景，如果您必须垂直或水平滚动以查看所有绿色框，则保持放置。 Android上的Firefox闪烁了一些，但得到了正确的结果。但在Android上的Chrome中，背景线性渐变会滚动内容，留下白色背景。没有＆＃34;不重复＆＃34;属性，它实际上重复了背景，显然忽略了＆＃34;固定＆＃34;属性。

毫不奇怪，背景图像（https://misterneutron.com/bgtest/）也会发生同样的事情。相同的页面代码，但用以下代码替换html样式：

html {
    height:100%;
    background: url('aspectWide.jpg') no-repeat fixed center center;
    background-size: cover;
}

我已经尝试过所有类型的替代品 - 在html和body上有百分之百的高度和宽度，将背景放在身体而不是html上，依此类推。似乎没有什么能改变这种行为。有谁知道如何击败这个浏览器错误，或者我只是要等待将来的版本？我可以做一些浏览器嗅探并消除背景，如果它是Android上的Chrome，但是呃。

有关于类似问题的线索，但大多数都是几年之久，并且解决了许多旧版本的浏览器问题。并没有一个建议的解决方法成功。

编辑：另一个数据点。重复背景问题严重得多：https://misterneutron.com/bgtest2/。但是＆＃34;固定＆＃34;属性仍被忽略。然而，比原始问题更容易生活！

Android上Chrome中的线性渐变

0 个答案: