#ИМЯ?

Название довольно много говорит обо всем. Первое изображение ниже - скриншот, когда вся страница имеет высоту около 8000 пикселей, взятую в последней версии Chrome:

в то время как это изображение для другой страницы (с использованием того же CSS), что составляет около 800 пикселей:

и вот код:

  body{ 
     background-color: #f3ffff;
     margin:0px;
     background-image: url('/media/flourish.png'),
        -webkit-linear-gradient(
            top, 
           rgba(99, 173, 241, 1) 0px, 
           rgba(0, 255, 255, 0) 250px
        );

     background-image: url('/media/flourish.png'), 
        -moz-linear-gradient(
           top, 
           rgba(99, 173, 241, 1) 0px, 
           rgba(0, 255, 255, 0) 250px
        );


     background-image: url('/media/flourish.png'), 
        -o-linear-gradient(
           top, 
           rgba(99, 173, 241, 1) 0px, 
           rgba(0, 255, 255, 0) 250px
        );
     background-position: center top, center top;
     background-repeat: no-repeat, repeat-x;
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
  }

Градиент предназначен для обрезания на 250 пикселей в верхней части страницы. Тот факт, что степень обвязки, по-видимому, зависит от общей высоты страницы, очень странный: страницы высот между этими двумя (800px и 8000px), кажется, имеют полосы, которые меньше первого примера, но все же заметны.

Интересно, что раньше я использовал -webkit-gradient('linear'...), и у меня не было той же проблемы; Я перешел только на -webkit-linear-gradient, чтобы он соответствовал моим градиентам -moz и -o.

Я не пробовал это в Safari, но вышеприведенный код отлично работает в Firefox и работает в Opera (цвета перепутались, но градиент по-прежнему плавный). Nevermind IE, от которого я отказался.

Кто-нибудь еще видел это раньше?

Обновление: это происходит и на моем Mac Chrome/Safari, но полосы примерно на 1/3 размера полос, показанных на верхнем изображении, для одной и той же страницы. Группировка идентична как в OSX Chrome, так и в OSX Safari.

1/3 размер по-прежнему заметен, но не настолько резкий. Фактическая страница находится в http://www.techcreation.sg/page/web/Intro%20to%20XTags/, если вы хотите увидеть себя в другом браузере. CSS является "встроенным" css, скомпилированным в браузере с использованием less.js.

Ответ 1

Похож на ошибку webkit. Я придумал обход ниже, проверенный на последних версиях Chrome и FF. Короче говоря, вы разместите div, содержащий фон за основным содержимым. Я также добавил несколько стилей, чтобы сделать IE более счастливым.

С учетом этого HTML:

<html lang="en">
<head>
    <style>
        ...
    </style>
</head>
<body>
    <div class="background">bgdiv</div>
    <div class="content_pane">
        <div class="titlebar">Leave a Comment!</div>
        <div class="comment">Your Comment.</div>
    </div>
</body>
</html>

В сочетании с этой таблицей стилей:

    body{
        background-color: #f3ffff;
        min-height: 100%;
        margin:0px;
    }
    .background {
        height: 250px;
        left: 0;
        position: absolute;  /* could use fixed if you like. */
        right: 0;
        top: 0;
        z-index: -10;

        background-image:
            -webkit-linear-gradient(top,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -moz-linear-gradient(top,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -o-linear-gradient(top,
                rgba(99, 173, 241, 1) 0px,
                rgba(0, 255, 255, 0) 250px
            );
        background-image:
            -ms-linear-gradient(top,
                rgba(99,173,241,1) 0%,
                rgba(0,255,255,0) 250px
            ); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
        background-image:
            linear-gradient(top,
                rgba(99,173,241,1) 0%,
                rgba(0,255,255,0) 250px
            ); /* W3C */
        background-position: center top, center top;
        background-repeat: no-repeat, repeat-x;
    }
    .content_pane {
        background: white;
        border: 1px dotted white;
        border: 1px solid grey;
        font-family: arial, sans;
        font-weight: bold;
        margin: 6em auto 5em;
        width: 50%;
    }
    .titlebar {
        background: #3f7cdb;
        color: white;
        font-family: arial, sans;
        padding: .25em 2ex .25em;
    }
    .comment {
        padding: 1em;
    }

Он должен выглядеть так, независимо от размера окна:

Ответ 2

Ваша демонстрационная ссылка не работает, но я сделал некоторые тесты, и она отлично работала для меня, используя Chrome, когда вы добавляете ширину/высоту 100% в элементы body/html, например:

body, html {
    width:100%;
    height:100%;
}

Демо

Вы можете попробовать это или можете просто объявить заголовок/логотип, где вы можете добавить начальный градиент и просто добавить конечный градиент к телу вашего css, чтобы он сливался правильно, например:

CSS

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body {
    background-color: #f3ffff;
    margin:0px;
    height:10000px;
}

.header {
    height:300px;
    width:100%;
    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
    -webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
    );

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
    background-position: center top, center top;
    background-repeat: no-repeat, repeat-x;
    background-size:auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}

HTML

<div class="header">
    content
</div>

Демо

Дружественное примечание: Для любого, кто ищет проблему, вы можете увидеть, как это происходит в Chrome: http://jsfiddle.net/skJGG/

Ответ 3

Похоже, у Chrome есть некоторые ошибки при использовании значений rgba(). Я пробовал с нормальными шестнадцатеричными значениями и, похоже, решил проблему для меня.

Посмотрите здесь, если он исправит его и для вас.

Edit

Похоже, проблема в пределе 250px, потому что она появляется только тогда, когда она установлена.

Мне не удалось найти лучшее решение, чем этот.

Перекрытие div с градиентом, который вам нравится, 250px tall. Тогда вы можете сделать страницу такой высокой, как хотите, потому что div всегда будет иметь высоту 250 пикселей.

Ответ 4

Webkit визуализирует -webkit-gradient('linear'...) и webkit-linear-gradient таким же образом. Проблема заключается в вашем многократном фоне. У меня была одна и та же проблема, и я закончил с двумя разными элементами друг на друга, а затем давал задний план каждому из них. Что-то вроде:

<body>
 <div class="body-overlay"<div>
</body>

CSS

body{-webkit-linear-gradient(...)}
    .body-overlay{background:url('blah.png')}

Я думаю, это происходит потому, что изображение имеет фиксированное количество пикселей

Ответ 5

вместо использования фонового изображения, попробуйте использовать это (фон) -

 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */

а также всегда использовать шестнадцатеричные значения. Но с точки зрения UX было бы лучше использовать как в изображении (так как вы все равно загружаете изображение), и вам не придется беспокоиться о совместимости с браузером.

Ответ 6

Вы пробовали установить background-size: auto, 250px 250px; - auto для первого изображения и 250 пикселей для вашего градиента.

Если вам не нужен градиентный образ настолько большой, что он будет охватывать всю страницу, лучше всего ограничить его размер. Помимо проблем с большими изображениями, я думаю, что это лучше для производительности браузера.

Итак, вы, например, выглядели бы как http://jsfiddle.net/kizu/phPSb/ (вслепую, не могли воспроизвести проблему, хотя).