Блог

Главная - Вопросы по программированию - Перемещение/масштабирование HTML-элемента оставляет остатки границ повсюду

Перемещение/масштабирование HTML-элемента оставляет остатки границ повсюду

#html #css

Вопрос:

Я работаю со своей библиотекой диаграмм в Blazor, которая использует HTML/CSS для отображения узлов и ссылок. В одном из моих случаев использования, когда я уменьшаю масштаб до максимума и перемещаю узел, он начинает оставлять «остатки границ» или остатки повсюду. Когда я удаляю границы из CSS узла, это не так.

Масштабирование выполняется с помощью функции transform: translate(x, y) scale(f) CSS. В настоящее время масштаб равен 0,1, элементы кажутся очень маленькими, но все еще подвижными.

Перемещение узла — это простое изменение его top свойств и left свойств CSS. Как вы можете догадаться, узлы имеют абсолютное положение. И они переходят на div с overflow: visible тех пор, как могут выйти за рамки.

Вот как выглядит проблема:
введите описание изображения здесь

Вот как выглядит узел:

 <div class="node" style="top: 100px; left: 100px">
    <div class="content">
        OTHER STUFF
    </div>
    <div class="border"></div>
</div>

CSS границы:

     border: calc(var(--node-border-width)   3px) solid rgb(0, 120, 215);
    height: calc(100%   2px);
    left: -1px;
    pointer-events: none;
    position: absolute;
    top: -1px;
    width: calc(100%   2px);

Кто-нибудь знает, в чем может быть проблема? Это происходит как в Chrome, так и на Edge из моих тестов.

Комментарии:

1. Я видел нечто подобное, и, похоже, это «частичные пиксели», оставшиеся позади (один цельный пиксель CSS состоит из нескольких пикселей экрана). Можете ли вы разместить рабочий фрагмент, который показывает проблему. Например, изменяется ли ширина —node-границы динамически?

2. Привет @AHaworth, заходи blazor-diagrams.zhaytam.com/demos/custom-group и увеличивайте масштаб до тех пор, пока элементы не станут очень маленькими, затем начните перемещать зеленый узел (группу).

3. Ничто не изменяется динамически во время перемещения узла, кроме top и left .

4. Я попробовал на своем ноутбуке с Edge/Windows 10, увеличил и уменьшил масштаб, и не увидел никаких случайных линий с большим и быстрым/медленным перемещением зеленого элемента…. (Мне удалось использовать 20% графического процессора). Какую ОС/браузер вы используете?

5. Протестировано как на Edge, так и на Chrome. Проверьте эту проблему, она содержит очень простой пример, который воспроизводит проблему, а также некоторые рабочие исправления: github.com/Blazor-Diagrams/Blazor. Диаграммы/проблемы/143

Метки: