Как убрать мыльный край у градиента css?

Question

[iDrugov]

У меня в проекте есть блок контента и сам body. Контент уже, чем body, но в определённый момент им надо задать одинаковый стиль для получения определённого эффекта. Я пошёл вот таким путём: https://jsfiddle.net/uftLfgz4/1/

Проблема заключается в том, что в Chrome края мыльные, более того - в самом проекте почему-то центральная часть content как бы выступает за пределы стиля body, хотя размеры все верны.

В Opera такая проблема есть, но она менее заметная. Может, я неправильно заюзал сам стиль?

Хром:


Опера:


Хром проект:


Опера проект:

Answer 1

[Назар Мокринский]

Смотрите в рассчитанных размерах в CSS отладчике целые ли размеры в пикселях выставились на элементы по высоте.

Comments

[iDrugov]

Целые, во всех браузерах одинаковые. По невиданной причине на рабочем пк проблем не наблюдается. Ничего не понимаю.

[Назар Мокринский]

iDrugov: Тогда смотрите отличие в настройках аппаратного ускорения. Возможно на одной машинке оно используется, а на другой нет.

[iDrugov]

Назар Мокринский: даже если дело там, то все равно мне надо для всех пользователей одинаково сделать, где-то со своей стороны настроить.

[Назар Мокринский]

iDrugov: Сначала нужно понять что происходит и почему. Только после этого можно будет что-то предпринять. Напимер, можно форсировать аппаратное ускорение для рендеринга какого-то элемента. Но в общем смахивает на баг, который в случае определения причины нужно отправить разработчикам на исправление.

[Назар Мокринский]

iDrugov: Открыл jsfiddle в Chromium nightly на Ubuntu 17.10 x64 - тоже мыльный край, посмотрю что к чему. В Firefox Nightly всё ок.

[Назар Мокринский]

iDrugov: ОК, во-первых не рекомендую использовать древнее -webkit-linear-gradient, а во вторых проблема известная и по всей видимости не решена. Как обходной путь предлагают использовать несколько градиентов подряд отдельно: https://stackoverflow.com/questions/26652661/blurr...

Если соизволите - отправляйте баг репорт в трекер Chromium и добавляйте ссылку в вопрос, будем голосовать

[iDrugov]

Назар Мокринский: видимо, мои знания устарели -- а что не древнее? По-моему, без префиксов сейчас ещё не всё работает.

Спасибо, что копнули так глубоко :) На счёт баг-репорта - посмотрю вечером ещё предложенный вариант с процентами, будет ли результат ну и попробую что-нибудь сформулировать, т.к. у меня и с мобильным хромом есть проблема (другого характера).

[Назар Мокринский]

iDrugov: В Firefox/Opera/IE без префиксов с 2012 года, в Chrome/Android с 2013 года, Safari с 2014 года: https://caniuse.com/#search=gradient

[Назар Мокринский]

iDrugov: Есть подозрение что проблема проявляется с разными версиями Skia или ещё чего-то там. Какую версию Skia выдает chrome://gpu/? У меня Skia/61 f449ded72acf90c1d68a9492bc627a16e709591d-

[iDrugov]

Назар Мокринский: я полгода назад начал заниматься этой темой и у меня на ПК в Опера не работал linear-gradient без префикса вебкита. Я так думаю, что это связано с тем, что у меня iframe-приложение вконтакте -- там много удивительных вещей происходит, когда что-то работает на сайте, но не работает в приложении )

Но я перепроверю всё, спасибо за наводку.

[iDrugov]

Назар Мокринский: на работе, где нет размытия:
Skia/58 4c81ba6ba3a3270db809bf7d4c3bc782694a56a4

дома буду после 19 часов по Мск -- напишу, когда проверю.

[iDrugov]

Назар Мокринский: фича с background-position помогает. Правда, настроить её довольно проблематично. Отправил баг-репорт из браузера, но думаю, что это исправлять будут ещё долго, ведь проблема не в одном браузере.

Answer 2

[Negwereth]

Поставьте брейкпоинты процентами, может и поможет.