Bootstrap 3 размывает мое полотно

Question

Я разрабатываю веб-приложение, которое использует холст для диаграмм org диаграмм, и я использую bootstrap 2.3 без проблем. Несколько дней назад я перешел на загрузку 3, и теперь я вижу размытие на моем холсте. Пусть изображения говорят:

< - С Bootstrap 3

< - Без Bootstrap 3

Я не хочу, чтобы понизить, потому что это не так просто и потому, что мне нравится новая версия , но как я могу узнать, где проблема? Есть ли способ сказать, что css применяется к элементам холста? Их управляют за кулисами сторонней, скомпилированной js-библиотекой.

Спасибо!

Answer 1

Вы можете проверить холст свойство className, чтобы увидеть, если класс имеет значение:

var canvas = document.getElementById('myCanvas); 

if (canvas.className.length > 0) alert('CSS class set'); 

или вы можете запросить свойства и сравнить их (что-то вроде этого):

var w = canvas.style.getPropertyValue('width')||0, 
    h = canvas.style.getPropertyValue('height')||0; 

if (w > 0 && w !== canvas.width) canvas.width = w; 
if (h > 0 && h !== canvas.height) canvas.height = h; 

CSS будет влияют на холст, если интерполяция активна (по умолчанию), а размер CSS отличается от фактического измерения холста - как и с изображениями.

Так что, возможно, имеется размер коробки с активным загрузочным ремнем в сочетании с дополнением/границей или другим стилем, который немного влияет на размер и тем самым активирует интерполяцию/субпикселирование.

Answer 2

Благодаря @ кен-Abdias программного обеспечение на комментарий, я посмотрел в свойства CSS и уведомление коробчатой ​​проклейку применяются в качестве пограничного ящика для любого тега с бутстрапом 3.

я изменил его и теперь холст совершенно оказаны.

canvas{ 
    box-sizing: content-box; 
}