Несоосность линий

[tt48]

Доброго.

Несколько лет назад видел статью про ошибки округления в браузерах, но не смог за давностью лет найти этот материал обратно..

Суть вопроса

http://beavers-net.narod.ru/primers/boolean_sch/bool_sch_min_pr.html

Стили http://beavers-net.narod.ru/primers/boolean_sch/base.css

 

Есть схемка. Реализовано все на таблицах + чутка блоков.

 

при масштабировании страницы что-то как-то куда-то уезжает все

Например:

http://beavers-net.narod.ru/primers/boolean_sch/err1.jpg

строка таблицы по высоте проставлена 16px, но при уменьшении масштаба становится ниже (см. рис.)

 

Или разъезжаются части схемы:

http://beavers-net.narod.ru/primers/boolean_sch/err2.jpg

Opera 30, Chrome 43.

HTML валиден, CSS тоже.

 

Буду рад любым предложениям по усовершенствованию динозавра

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

Полагаю, со временем придется посмотреть в сторону svg, но пока руки не дотянулись глянуть, что там.

 

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

С уважением, Олег.

[Veseloff]

А зачем это верстать на HTML? По-моему, тут должна быть картинка ну или, в крйнем случае, SVG.

[tt48]

Изначально интересовала скорость реализации + масштабируемость\настраиваемость.

 

Картинкой - надо в код лезть, перекомпилировать, опять запускать. Даже если хранить представление объекта решения где-нить на диске, это все равно дольше, чем просто настройка стилей.

Хотя это и не так часто требуется

 

svg, vrml - пока не смотрел, что там и кто лучше.

 

Картинкой-то я и сейчас могу сделать, просто сняв скрин с 100% масштаба(там косяков нет)

 

Но в какой-то мере заинтересован в сути происходящего. Я еще понимаю, когда border мог бы не отрисовываться ровно, потому как по спецификации он должен на полширины линии быть внутри, на пол - снаружи. А тут - непонятно. Раньше, вроде бы, картинки-макеты резал, верстал теми же табличками с блоками и не было таких проблем.

[sigma77]

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

[tt48]

Хорошее предположение, но нет (заменил все картинки на блоки Inline-block) - http://beavers-net.narod.ru/primers/boolean_sch/no_img.html

при масштабе 125% в хроме все те же косяки.

Сейчас осталась часть, которая отрисовывается фоном(заливкой background-color) блоков.

——————--

UPD:

*ну да, забыл еще про фоновые картинки в таблице

 

Проблема:

1) те размеры линий, что в процентах, зависят от размера ячейки таблицы, а он плавает при масштабировании.

Длины красных линий, например.

Причем значения там дробные

 

2) Допустим, это все хорошо и действительно причина в этом (нечеткий размер таблицы), но этого недостаточно, чтобы объяснить:

    а) изменение размеров строк с фиксированной высотой .tr_x (http://beavers-net.narod.ru/primers/boolean_sch/err1.jpg),

    б) почему при одинаковой толщине в computed у разных блоков реальная отображаемая толщина разная.

 

Надо будет попробовать на блоках переверстать.. но хотелось бы знать перспективность занятия==причину ошибки, а то вдруг она наследуется..

Если кто видел реализацию подобного - просьба дать пример. Спасибо

Edited June 21, 2015 by tt48