Я рендерирую страницу PDF на Canvas , где я вычисляю элемент контейнера Canvas из соотношения физического аспекта страницы PDF, прежде чем перенести его на экран. PrettyPrint-Override ">
Где стиль атрибут div.page-container устанавливается через JS после загрузки PDF, и после того, как все элементы уже добавляются в DOM, так что Canvas рендерин
Код: Выделить всё
div.scrolling-document-container {
--document-viewer-width: calc(100svw - 16rem);
width: var(--document-viewer-width);
height: 800px;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
}
div.scrolling-document-container > div.page-container {
position: relative; /* Traps an absolutely-positioned loading gif that is removed once the page is done drawing */
width: var(--document-viewer-width);
max-width: 100%;
height: auto;
}
div.scrolling-document-container > div.page-container > canvas.page-surface {
z-index: 0; /* To keep the page below the aforementioned loading gif */
width: 100%;
height: 100%;
}
В Chrome и Firefox поведение, как и ожидалось: контейнер становится каким -либо кальком (100svw - 16Rem) , и высота растет в соответствии с аспектом -ratio , эффективно выполняя «подходящее к ширине» на документе. Родительский элемент закручивается, и все страницы в контейнере демонстрируют одно и то же поведение; 100% ширина и высота, эффективно выполняя «растяжение» в документе. Все применяется точные стили, которые я ожидал, и это находится в Safari 18.5, работающий на macOS 15.5, так что это не должно быть с отсутствием поддержки свойства аспекта , как это было в случае этого вопроса несколько лет назад. С переключающими стилями в сафари -инспекторе иногда появляется желаемое поведение без реальных изменений (все переключалось). Мне интересно, что происходит, так это то, что встроенные стили применяются строго после CSS -стилей, чтобы обеспечить перезапись приоритет, но без пересмотренных свойств, которые обязательно зависят от тех встроенных стилей, которые были применены заранее, например, в тех сценариях, что я не так, как то, что я делаю. Chrome и Firefox молча разрешают/исправляют это?
Подробнее здесь:
https://stackoverflow.com/questions/797 ... pect-ratio
Мобильная версия