Константин Давыдов: не, хотя и станет менее заметен. Это разработчики браузеров схалтурили. Они ввели, что можно делать border-radius без рамки, но сам процесс рендера не поменяли и просто сделали автоматическую рамку минимальной толщины. А если чето меньше 1px, то оно иногда отображается, иногда нет. А иногда отображается непонятным образом. Вот и артефакты.
border-radius рубит немного изображение в местах скругления делая его чуток размытым, размывает его с тем, что находится под элементом. Если под элементом белый цвет, будут белые рамки.
Константин Давыдов к сожалению это не исправило ошибку, хотя и сделало ее менее заметной (белая рамка стала в 2 раза тоньше). Откройте в firefox, там она все равно будет.
Максим Тимофеев: лол, они стали в 2 раза тоньше)
Гляньте на превью и что там происходит по бокам: codepen.io/just-a-training
На некоторых экранах такая фигня с рамками осталась)) С компом при некоторых разрешениях не видно, а если поресайзить то видно. Видать сам рендер хитрый и с артефактами.
Максим Тимофеев: left это просто элемент в контейнере, при этом не так важно какого он размера и в какой он позиции, у самого элемента форма может быть любая. Если добавить right - будет еще один элемент в контейнере.
xmoonlight: Никакой. Обычно такое используется для картинок продукции, примеров работ в портфолио. Начинает казаться, что товаров/работ реально много. А тут просто шум и неразбериха. Текст на 20 разных уровнях — это вообще издевательство.
Rapen: тут никакой особой магии не происходит, результат той строчки аналогичен тому, что я написал. Если вам интересно сам процесс создания объекта при вызове через new, то вот вам спецификация в которой все описано шаг за шагом: www.ecma-international.org/ecma-262/5.1/#sec-13.2.2
Kris125: я тоже попробовал, надпись Lux просто сделана была в векторном редакторе, она кастомная и на самом деле достаточно плохого качества как для шрифта. За основу скорее всего взяли Arial =)
Гриша Никольский: я тоже об этом говорю, с первого сообщения) Этот слайдер что-то ломает очевидно. Понять почему и как можно только если дебажить ваш JS код.
Основную идею я сказал — размеры элемента должны быть вычислены До того, как сетка начинает высчитывать расстояния, и не меняться после. Или меняться, но повторно вызывая пересчет сетки. Тогда проблем не будет.
Гриша Никольский: возможно получится все поправить если инициализировать в коде слайдер до того, как сетка начинает распихивать все элементы по местам. Похоже сам masonry видит тот элемент с размерами 0, 0. А после расчета сетки, вы этот размер меняете и происходит такая грязь
Гриша Никольский: что значит нельзя удалить?) дело в самом элементе, он отличается от других минимум тем, что он ломает сетку, а максимум в нем вы пытаетесь запихнуть какой-то слайдер или чо... Его надо поправить, а сама сетка в порядке.
По поводу кнопок 1 2 3, вы их позиционируете блочным элементом, а сам Masonry(хоть я им и не пользовался никогда) шьет ваш элемент с position: absolute; таким образом он выпадает из контекста блочных элементов и эти кнопки отображаются как будто на странице никаких плиток нет. Тут надо двигать ваши кнопки на высоту блока с вашими плитками, а clearfix-ы можете просто нафиг убрать.
border-radius рубит немного изображение в местах скругления делая его чуток размытым, размывает его с тем, что находится под элементом. Если под элементом белый цвет, будут белые рамки.