Проблема: смещение на 1px background в Хроме и Мозила

[Akkord87]

Здравствуйте уже ни раз сталкиваюсь с подобной проблемой и вот наконец то решил обратиться за помощью Суть проблемы:

 

Подопытный сайт: http://www.retro.ontuning.ru/

Так же прикладываю картинки для наглядности.

 

В левом садбаре имеется табличка, а за ней находится труба, эту трубу я реализовал следующим образом: вырезал кусок трубы размером 12рх на 12рх, после чего добавил в сайтбар свойством background, определил позицию трубы свойством background-position и растянул в длину, чтобы она состыковывалась с фоном в шапке и с фоном в подвале. Таким образом, я добился, чтобы труба тянулась при наличии контента. В мозили все отображается хорошо, так как нужно, а вот в хроме, расхождения фона в 1рх, при этом если я правлю в хроме, что соответственно становится криво в мозиле. Как решить эту проблему? Если это конечно возможно...

 

Заранее спасибо

 

Как отображается в мозиле:

 

Как отображается в хроме:

[Vlad]

Посмотрел при разном масштабе в Хроме. В целом, это проблема отображения именно браузера, потому что проявляется при уменьшении масштаба. Кроме сдвига вправо ещё маленький разрыв по вертикали появляется.

[Akkord87]

Посмотрел при разном масштабе в Хроме. В целом, это проблема отображения именно браузера, потому что проявляется при уменьшении масштаба. Кроме сдвига вправо ещё маленький разрыв по вертикали появляется.

 

То есть универсального хака нету?

[Vlad]

Мне неизвестно, может кто другой что посоветует.

 

Можно попробовать увеличить размеры рисунка bg-line.jpg, заменив его на png и добавив пустое пространство справа. Гипотетически искажений должно стать меньше, но это лишь моя гипотеза.

[Akkord87]

Мне неизвестно, может кто другой что посоветует.

 

Можно попробовать увеличить размеры рисунка bg-line.jpg, заменив его на png и добавив пустое пространство справа. Гипотетически искажений должно стать меньше, но это лишь моя гипотеза.

Ок. Спасибо за совет, раз уж пока решения нету, попробую этот вариант

[ShumNo]

Судя по всему виной не браузеры, а где-то косяк в верстке (адаптивности) потому как при разной ширине экрана баг то появляется то исчезает при работе медиа запросов (на 1600 бага нет, на каком-то отрезке в районе 1200 пикселей баг появляется)

[Akkord87]

Судя по всему виной не браузеры, а где-то косяк в верстке (адаптивности) потому как при разной ширине экрана баг то появляется то исчезает при работе медиа запросов (на 1600 бага нет, на каком-то отрезке в районе 1200 пикселей баг появляется)

 

Хм, а вы правы, буду искать проблему) Спасибо, что послали в нужном направлении)))

[Нарек]

А мне кажется, что это все же баг отображения в браузере. А именно в хромиум. Так как в хроме и в опере баг есть - в ФФ нет. Если так бесит этот пиксель то наверно лучше картинку полностью поставить на фон, не частями.

 

P.S. Возможно поможет

Edited October 27, 2015 by Нарек

[ShumNo]

Да в FF не заметил бага, но думаю, что все таки верстка виновата - что-то хромиуму не хватает и он ставит этот пиксель - может даже с 2-х сторон блока

можно скриншоты сделать и посчитать пикселы у блоков

[Нарек]

Тут 1px, а по запросу бага 1px именно для хромиумов гугл выдает кучу тем и решений, наверно все таки баг)

[klierik]

теоритически: можно вырезать картинку размером в 2 раза больше (aka retina style), указать ей background-size (если картинка в оригинале 12х12, мы её вырезаем 24х24, то значение данного правила будет 12х12), и потом размножаем по горизонтали\вертикали. В таком случае у масштабируемого изображение будет в 2 раза больше информации о себе и это может удачно сказатся в данной ситуации.

 

ps: мысли в слух, не пробовал, но проверил бы если бы надо было )

[Akkord87]

Да в FF не заметил бага, но думаю, что все таки верстка виновата - что-то хромиуму не хватает и он ставит этот пиксель - может даже с 2-х сторон блока

можно скриншоты сделать и посчитать пикселы у блоков

 

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

[Akkord87]

теоритически: можно вырезать картинку размером в 2 раза больше (aka retina style), указать ей background-size (если картинка в оригинале 12х12, мы её вырезаем 24х24, то значение данного правила будет 12х12), и потом размножаем по горизонтали\вертикали. В таком случае у масштабируемого изображение будет в 2 раза больше информации о себе и это может удачно сказатся в данной ситуации.

 

ps: мысли в слух, не пробовал, но проверил бы если бы надо было )

Попробовал, не работает, хотя сама идея интересная

[klierik]

Попробовал, не работает, хотя сама идея интересная

 

Спасибо, буду знать, а жаль