Как предотвратить фантомную полосу прокрутки в SVG ForeignObject с белым пространством: Pre-wrap? ⇐ Html

[Anonymous]

Я рендеринг html div внутри svg , чтобы создать коробку для комментариев в canvas. Мне нужен текст, чтобы уважать новую линии и обернуть правильно, поэтому я использую белое пространство: предварительный промежуток .
В моем контейнере появляется вертикальная прокрутка, даже когда текстовое содержимое короткое и не является визуально переполненным. Прокрутка должна появляться только тогда, когда контент действительно выше контейнера. Эта проблема, по-видимому, вызвана комбинацией белого пространства: Pre-wrap < /code> и моя вложенная структура Div, вероятно, из-за проблем рендеринга подпикселя с высокой линейной.

Код: Выделить всё

body {
font-family: sans-serif;
padding: 20px;
background-color: #f9f9f9;
}

svg {
border: 1px solid #d6d6d6;
background-color: #ffffff;
}

.container {
margin-bottom: 20px;
}

.container h4 {
margin: 0 0 5px 0;
font-weight: normal;
color: #555;
}

/* --- CSS from the question, using variables for clarity --- */
:root {
--cds-layer-active-02: #c6c6c6;
--cds-layer-02: #ffffff;
--cds-text-primary: #161616;
--cds-layer-01: #f4f4f4;
}

.svg-comment-text-scroll {
pointer-events: unset;
overflow-x: hidden;
overflow-y: auto;
border-color: var(--cds-layer-active-02);
border-width: 1px;
border-style: solid;
height: 100%;
width: 100%;
scrollbar-color: var(--cds-layer-active-02) var(--cds-layer-02);
box-sizing: border-box;
}

.svg-comment-text-outer {
display: table;
pointer-events: none;
overflow: hidden;
width: 100%;
height: 100%;
outline: none;
}

.svg-comment-text {
color: var(--cds-text-primary);
background-color: var(--cds-layer-01);
font-size: 12px;
font-weight: 500;
border-style: solid;
border-color: transparent;
width: 100%;
height: 100%;
pointer-events: auto;
overflow: hidden;
/* This fractional line-height is a key part of the problem */
line-height: 1.2;
/* This style is required but contributes to the issue */
white-space: pre-wrap;
word-wrap: normal;
word-break: break-word;
padding: 0.5rem;
/* 8px */
display: table-cell;
box-sizing: border-box;
}

.svg-comment-text.markdown p {
margin: 0;
}< /code>



[h4]Problem Case: Phantom Scrollbar[/h4]





Short text.







[h4]Correct Behavior: Real Scrollbar[/h4]





This is a much longer line of text that is designed to genuinely overflow the container and correctly show a scrollbar.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -space-pre