Откуда появляется полоса в градиенте?

Question

[Максим Тимофеев]

Вот код:
https://jsfiddle.net/990cz33x/1/

Там два блока с градиентом на фоне. Если оставить 1 блок - все ок. Если 2 - появляется по центру полоса.

Откуда?

Заметил, что полоса уходит если убрать min-height, но какая связь?

Беда наблюдается в хроме и яндексбраузере

Comments

[shurupkirov]

test в chrome 48.0.2564.116 m полос не заметил

[Максим Тимофеев]

shurupkirov: чудеса, а если окно уменьшить?

[shurupkirov]

shurupkirov: посайзил и увидел. трабл в бэкграундсайз. т.е. по факту это движок так рендерит при маленьких размерах.

[Максим Тимофеев]

shurupkirov: Посоветуйте. Забить? Реализовать по другому, например двумя дивами или решение возможно?

[shurupkirov]

Максим Тимофеев: зависит от того, что нужно по факту. при сайзинге по факту отображение меняется, поэтому непонятно, что именно должно быть и одинаковым ли при любой ширине

[Максим Тимофеев]

Шапка сайта, картинка на фоне родителя он релятивный в нем куча дивов и один обсолютный с этим кодом градиента. Все - резина. Пока отрицательными маргинами добился появления этой проблемы только на +-40px ширине.
Хотелось как-то не обычно сделать, что б мозг не скучал. Но видимо проще cvg туда кинуть на фон.

Answer 1

[Максим Тимофеев]

Походу это глюки рендера. Видимо кроссбраузерного решения через линейный градиент нет.

Answer 2

[g_s_e]

Если так, то пропадет:

.top div.wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -5px;
    min-height: 200px;
    background: linear-gradient(45deg, rgba(255,209,17,0) 50%, rgba(255,209,17,0.8) 60%, rgba(255,209,17,.8) 80%) no-repeat, linear-gradient(135deg, rgba(255,209,17,0.8) 0, rgba(255,209,17,0.8) 40%, rgba(255,209,17,0) 50%) no-repeat;
    background-size: 50% 100%, 50% 100%;
    background-position: 1px 0px, 100% 0px;
}

Comments

[Максим Тимофеев]

А почему?

[Максим Тимофеев]

И зачем left: -5px; тогда уже -1px

[Максим Тимофеев]

можно даже проще

width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, rgba(255,209,17,0) 50%, rgba(255,209,17,0.8) 60%, rgba(255,209,17,.8) 80%) no-repeat, linear-gradient(135deg, rgba(255,209,17,0.8) 0, rgba(255,209,17,0.8) 40%, rgba(255,209,17,0) 50%) no-repeat;
    background-size: 50% 100%, 50% 100%;
    background-position: 1px 0px, 100% 0px;

[Максим Тимофеев]

Но все равно не понятно почему?

[Максим Тимофеев]

Все равно съезжает при смене ширины окна и появляется полоса