Размер элемента диалогового окна не изменится на весь экран, даже если ширина и высота установлены на 100 %. ⇐ CSS

[Anonymous]

В процессе написания кода проекта я решил заменить созданное мной всплывающее окно тегом диалога. Но затем я столкнулся с проблемой: элемент диалогового окна не распространялся на весь экран, хотя я установил 100%/100v для ширины и высоты в стиле элемента.
Как вы можете видеть в примерах, которые я приложил, в примере 2 есть базовый элемент диалога, который распространяется по всему экрану, а в примере 1 (это мой проект с открытым исходным кодом) е с т ь п о л я с п р а в о й с т о р о н ы и н и ж н е й ч а с т и э к р а н а . < / p > < b r / > < s t r o n g > П р и м е р 1 : < / s t r o n g > < / p > < b r / > < d i v c l a s s = " s n i p p e t " > < b r / > < d i v c l a s s = " s n i p p e t - c o d e " > < b r / > < p r e c l a s s = " s n i p p e t - c o d e - j s l a n g - j s P r e t t y p r i n t - o v e r r i d e " > < c o d e > c o n s t d i a l o g C o n t e n t = ` < b r / > & l t ; d i v c l a s s = " b o x v i e w _ _ c o n t a i n e r " & g t ; < b r / > & l t ; d i v c l a s s = " b o x v i e w _ _ c o n t r o l - b a r " & g t ; < b r / > & l t ; d i v c l a s s = " b o x v i e w _ _ c o n t r o l s - b u t t o n s b o x v i e w _ _ c o n t r o l s - b u t t o n s _ t y p e _ s h a r e " & g t ; < b r / > & l t ; d i v c l a s s = " s h a r e - o p t i o n s - b u t t o n s " & g t ; < b r / > & l t ; d i v & g t ; < b r / > < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v & g t ; < b r / > < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v & g t ; < b r / > < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; b u t t o n c l a s s = " b u t t o n " i d = " s h a r e - b u t t o n " & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; b u t t o n c l a s s = " b u t t o n " & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v < b r / > c l a s s = " b o x v i e w _ _ c o n t r o l s - b u t t o n s b o x v i e w _ _ c o n t r o l s - b u t t o n s _ t y p e _ i n t e r a c t i v e " < b r / > & g t ; < b r / > & l t ; b u t t o n c l a s s = " b u t t o n " & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; b u t t o n c l a s s = " b u t t o n " & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; b u t t o n < b r / > c l a s s = " b u t t o n b o x v i e w _ _ z o o m - i n - b u t t o n b o x v i e w _ _ z o o m - b u t t o n " < b r / > i d = " z o o m - i n - b u t t o n " < b r / > & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; b u t t o n < b r / > c l a s s = " b u t t o n b o x v i e w _ _ z o o m - i n - b u t t o n b o x v i e w _ _ z o o m - b u t t o n " < b r / > i d = " z o o m - o u t - b u t t o n " < b r / > & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; d i v c l a s s = " t h u m b n a i l s - b u t t o n s " & g t ; < b r / > & l t ; b u t t o n < b r / > c l a s s = " b u t t o n b o x v i e w _ _ t h u m b n a i l s - b u t t o n b o x v i e w _ _ t h u m b n a i l s - b u t t o n _ i c o n - f i l l e d " < b r / > i d = " t h u m b n a i l s - f i l l e d - b u t t o n " < b r / > & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; b u t t o n < b r / > c l a s s = " b u t t o n b o x v i e w _ _ t h u m b n a i l s - b u t t o n b o x v i e w _ _ t h u m b n a i l s - b u t t o n _ i c o n - o u t l i n e d " < b r / > i d = " t h u m b n a i l s - o u t l i n e d - b u t t o n " < b r / > & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > < b r / > & l t ; b u t t o n c l a s s = " b u t t o n b o x v i e w _ _ f u l l s c r e e n - b u t t o n " i d = " f u l l s c r e e n - b u t t o n " & g t ; < b r / > < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; b u t t o n c l a s s = " b u t t o n b o x v i e w _ _ c l o s e - b u t t o n " i d = " c l o s e - b u t t o n " & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " b o x v i e w _ _ n a v i g a t i o n - b u t t o n s " & g t ; < b r / > & l t ; b u t t o n < b r / > c l a s s = " b u t t o n b o x v i e w _ _ n a v i g a t e - b u t t o n b o x v i e w _ _ n a v i g a t e - b u t t o n _ b e f o r e " < b r / > i d = " n a v - p r e v i o u s - b u t t o n " < b r / > & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; b u t t o n < b r / > c l a s s = " b u t t o n b o x v i e w _ _ n a v i g a t e - b u t t o n b o x v i e w _ _ n a v i g a t e - b u t t o n _ n e x t " < b r / > i d = " n a v - n e x t - b u t t o n " < b r / > & g t ; < b r / > < b r / > & l t ; / b u t t o n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " b o x v i e w _ _ c o n t e n t " d a t a - e l e m e n t = " b o x v i e w - c o n t e n t " & g t ; < b r / > & l t ; d i v c l a s s = " b o x v i e w _ _ m e d i a " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = " b o x v i e w _ _ t h u m b n a i l s - t r a c k " & g t ; & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > ` , a l l M e d i a L i s t = d o c u m e n t . q u e r y S e l e c t o r A l l ( " [ d a t a - b o x v i e w - l i s t ] " ) ; l e t m e d i a L i s t ; f o r ( l e t m l = 0 ; m l & l t ; a l l M e d i a L i s t . l e n g t h ; m l + + ) { m e d i a L i s t = [ . . . a l l M e d i a L i s t [ m l ] . c h i l d r e n ] ; f o r ( l e t e = 0 ; e & l t ; m e d i a L i s t . l e n g t h ; e + + ) { l e t t = m e d i a L i s t [ e ] ; i f ( t . s e t A t t r i b u t e ( " d a t a - b o x v i e w - i t e m " , " " ) , " v i d e o " = = = t . l o c a l N a m e ) { l e t i = t . p a r e n t E l e m e n t , o = d o c u m e n t . c r e a t e E l e m e n t ( " d i v " ) , n = d o c u m e n t . c r e a t e E l e m e n t ( " b u t t o n " ) ; o . c l a s s L i s t . a d d ( " b o x v i e w - v i d e o - w r a p p e r " ) , n . c l a s s L i s t . a d d ( " b o x v i e w - o p e n - p o p u p - b u t t o n " ) , n . s e t A t t r i b u t e ( " d a t a - b o x v i e w " , " v i d e o - b u t t o n " ) , t . r e m o v e A t t r i b u t e ( " c o n t r o l s " ) ; l e t l = ( ) = & g t ; { n . c l a s s L i s t . t o g g l e ( " b o x v i e w - o p e n - p o p u p - b u t t o n _ h i d d e n " ) } ; t . a d d E v e n t L i s t e n e r ( " m o u s e e n t e r " , d i s p l a y C o n t r o l s O n M e d i a I t e m ) , t . a d d E v e n t L i s t e n e r ( " m o u s e o u t " , u n D i s p l a y C o n t r o l s O n M e d i a I t e m ) , o . a d d E v e n t L i s t e n e r ( " m o u s e e n t e r " , d i s p l a y C o n t r o l s O n W r a p p e r ) , o . a d d E v e n t L i s t e n e r ( " m o u s e o u t " , u n D i s p l a y ControlsOnWrapper),t.addEventListener("play",l),t.addEventListener("pause",l);let a=t.offsetWidth;o.style.width=`${a}px`,t.style.width="100%",t.style.height="100%",i.replaceChild(o,t),o.appendChild(t),o.appendChild(n)}if("iframe"===t.localName){let r=t.parentElement,s=document.createElement("div"),d=document.createElement("button");s.classList.add("boxview-iframe-wrapper"),d.classList.add("boxview-open-popup-button"),d.setAttribute("data-boxview","video-button");let c=t.offsetWidth;s.style.width=`${c}px`,t.style.width="100%",t.style.height="100%",r.replaceChild(s,t),s.appendChild(t),s.appendChild(d)}}}const mediaItems=[...document.querySelectorAll("[data-boxview-item]")],boxviewPopover=document.createElement("dialog");boxviewPopover.classList.add("boxview"),boxviewPopover.innerHTML=dialogContent,document.body.appendChild(boxviewPopover);const boxviewContent=boxviewPopover.querySelector('[data-element="boxview-content"]'),nextButton=document.getElementById("nav-next-button"),previousButton=document.getElementById("nav-previous-button"),shareButton=document.getElementById("share-button"),shareOptionsButtons=boxviewPopover.querySelector(".share-options-buttons"),zoomInButton=document.getElementById("zoom-in-button"),zoomOutButton=document.getElementById("zoom-out-button"),closeButton=document.getElementById("close-button"),fullscreenButton=document.getElementById("fullscreen-button"),fullscreenEntryIcon=document.getElementById("fullscreen-entry-icon"),fullscreenExitIcon=document.getElementById("fullscreen-exit-icon"),thumbnailsShowButton=document.getElementById("thumbnails-outlined-button"),thumbnailsHideButton=document.getElementById("thumbnails-filled-button");thumbnailsShowButton.classList.add("boxview__thumbnails-button_active");const thumbnailsTrackHeight="72px",boxviewMediaWrapper=boxviewPopover.querySelector(".boxview__media"),boxviewThumbnailsTrack=boxviewPopover.querySelector(".boxview__thumbnails-track");let boxviewActiveMedia;const createMediaElement=e=>{(boxviewActiveMedia=document.createElement(`${e}`)).classList.add(`boxview__${e}`)},removeBoxviewMediaWrapperChildren=()=>{let e=[...boxviewMediaWrapper.children];e.forEach(e=>{e.classList.contains("button")||e.remove()})},createImageElement=function(e){0!==boxviewMediaWrapper.children.length&&removeBoxviewMediaWrapperChildren(),createMediaElement("img"),boxviewActiveMedia.setAttribute("src",e),boxviewMediaWrapper.appendChild(boxviewActiveMedia)},createVideoElement=e=>{0!==boxviewMediaWrapper.children.length&&removeBoxviewMediaWrapperChildren(),createMediaElement("video");let t=document.createElement("source");t.setAttribute("src",e),boxviewActiveMedia.setAttribute("controls",""),boxviewActiveMedia.appendChild(t),boxviewMediaWrapper.appendChild(boxviewActiveMedia),boxviewActiveMedia.load(),hideZoomButtons()},createIframeElement=e=>{0!==boxviewMediaWrapper.children.length&&removeBoxviewMediaWrapperChildren(),createMediaElement("iframe"),boxviewActiveMedia.setAttribute("src",e),boxviewMediaWrapper.appendChild(boxviewActiveMedia)};document.addEventListener("mouseup",e=>{if(e.target===boxviewPopover){let t=[...boxviewMediaWrapper.children];boxviewPopover.close(),t.forEach(e=>{e.classList.contains("button")||e.remove()}),removeAllChildNodes(boxviewThumbnailsTrack),boxviewActiveMedia=""}}),document.addEventListener("keydown",e=>{if("Escape"===e.key){let t=[...boxviewMediaWrapper.children];t.forEach(e=>{e.classList.contains("button")||e.remove()}),removeAllChildNodes(boxviewThumbnailsTrack),boxviewActiveMedia=""}});const removeAllChildNodes=function(e){for(;e.firstChild;)e.removeChild(e.firstChild)},handleCloseButton=()=>{boxviewPopover.close(),document.fullscreenElement&&document.exitFullscreen();let e=[...boxviewMediaWrapper.children];e.forEach(e=>{e.classList.contains("button")||e.remove()}),removeAllChildNodes(boxviewThumbnailsTrack),boxviewActiveMedia=""};closeButton.addEventListener("click",()=>{handleCloseButton()});const getBoxviewActiveMediaUrl=()=>"iframe"===boxviewActiveMedia.localName?boxviewActiveMedia.src:boxviewActiveMedia.currentSrc,toggleThumbnailsMode=()=>{let e=boxviewContent.style.getPropertyValue("--thumbnails-track-height");thumbnailsShowButton.classList.toggle("boxview__thumbnails-button_active"),thumbnailsHideButton.classList.toggle("boxview__thumbnails-button_active"),e===thumbnailsTrackHeight?boxviewContent.style.setProperty("--thumbnails-track-height","0px"):boxviewContent.style.setProperty("--thumbnails-track-height",thumbnailsTrackHeight)};let thumbnailElement;const createThumbnail=()=>{(thumbnailElement=document.createElement("img")).classList.add("boxview__thumbnail"),boxviewThumbnailsTrack.appendChild(thumbnailElement)};let mediaElementType;const checkChildMediaElement=(e,t)=>{let i=[...e.children],o=i.find(e=>t.includes(e.localName));if(null!==o)mediaElementType=o.localName;else throw unauthorizedError.message="Element must contain an image, video or iframe",unauthorizedError},checkElementsTypes=(e,t,i)=>{for(let o=0;o{let t=[],i=["img","video","iframe"];return checkElementsTypes(e,i,t),t},getInitialMediaSrc=(e,t)=>{let i;return"img"===t?createImageElement(i=e.currentSrc):"video"===t?createVideoElement(i=e.currentSrc):"iframe"===t?createIframeElement(i=e.src):void 0};function getInitialMedia(e,t){1===e.length&&(e.includes("img")&&getInitialMediaSrc(t,"img"),e.includes("iframe")&&getInitialMediaSrc(t,"iframe"),e.includes("video")&&getInitialMediaSrc(t,"video")),1!==e.length&&("iframe"!==t.localName?t.currentSrc:t.src,getInitialMediaSrc(t,t.localName))}const getElementTarget=e=>{if(e.target.classList.contains("boxview-open-popup-button")){if(e.target.parentElement.querySelector("video")){let t=e.target.parentElement.querySelector("video");return t}if(e.target.parentElement.querySelector("iframe")){let i=e.target.parentElement.querySelector("iframe");return i}}else{let o=e.target;return o}},openBoxview=e=>{let t=getElementTarget(e),i=[...t.closest(".media-content").children],o=[],n=()=>{for(let e=0;e{for(let e=0;e video {
position: relative;
}

.media-content > video::after {
content: '\e038';
font-family: "Material Icons";
position: relative;
top: 0;
left: 0;
font-weight: 400;
line-height: 1;
z-index: 100;
color: black;
font-size: 130px;

} */

.media-content__image,
.media-content__video {
width: 400px;
display: inline-block;
}

.media-content__youtube {
width: 400px;
aspect-ratio: 16/9;
}

.popup-button {
width: 150px;
padding: 1rem 2rem;
border: black 3px solid;
}

.html-video {
width: 500px;
aspect-ratio: 16/9;
}

.youtube-video {
display: block;
width: 500px;
aspect-ratio: 16/9;
}

/* dialog elm */

.boxview {
box-sizing: border-box;
margin: 0;
padding: 0;
--boxview-padding: 10px;
width: 100%;
height: 100%;
/* margin-inline: var(--boxview-padding);
margin-block-end: var(--boxview-padding); */
border: none;
background-color: rgba(0, 0, 0, 0.97);
}

/* :modal {
position: fixed;
inset-block-start: 0px;
inset-block-end: 0px;
max-width: calc((100% - 6px) - 2em);
max-height: calc((100% - 6px) - 2em);
user-select: text;
visibility: visible;
overflow: auto;
} */

.boxview::backdrop {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.97);
}

.boxview>* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.boxview__container {
width: 100%;
height: 100%;
--content-height: 100%;
--boxview-control-bar-height: 60px;
/* option = media preview adjustment */
--thumbnails-track-height: 0;
}

.boxview__control-bar {
/* position: sticky;
position: -webkit-sticky;
inset-block-start: 0;
inset-inline-start: 0; */
height: var(--boxview-control-bar-height);
display: flex;
align-items: center;
justify-content: center;
column-gap: 25px;
width: 100%;
padding-inline: 15px;
}

.boxview-video-wrapper,
.boxview-iframe-wrapper {
display: inline-block;
position: relative;
}

.boxview-video-play-button {
width: 52px;
height: 52px;
position: absolute;
content: '';
top: 50%;
right: 51%;
transform: translateY(-50%);
background: url(./play_circle_black_24dp.svg) no-repeat;
background-position: center;
border: none;
cursor: pointer;
/* background-size: calc(50px + 10%); */
z-index: 1;
}

.boxview-open-popup-button {
display: none;
visibility: hidden;
}

.boxview-video-wrapper:hover .boxview-open-popup-button {
display: inline-block;
visibility: visible;
width: 52px;
height: 52px;
position: absolute;
content: '';
top: 20px;
right: 20px;
background: url(./launch_black_48dp.svg) no-repeat;
background-color: #00000050;
border: none;
cursor: pointer;
background-position: center;
/* background-size: calc(50px + 10%); */
z-index: 1;
transition: all ease 0.2s;
}

.boxview-iframe-wrapper:hover .boxview-open-popup-button {
display: inline-block;
visibility: visible;
width: 52px;
height: 52px;
position: absolute;
content: '';
top: 20px;
right: 20px;
background: url(./launch_black_48dp.svg) no-repeat;
background-color: #00000050;
border: none;
cursor: pointer;
background-position: center;
/* background-size: calc(50px + 10%); */
z-index: 1;
transition: all ease 0.2s;
}

.boxview-video-play-button_hidden,
.boxview-open-popup-button_hidden {
visibility: hidden;
opacity: 0;
}

.boxview__content {
/* option = aspect-ratio */
--media-preview-aspect-ratio: 16/9;
--media-preview-width: calc( var(--thumbnails-track-height) * var(--media-preview-aspect-ratio));
height: calc(var(--content-height) - var(--boxview-control-bar-height));
display: flex;
flex-flow: column;
align-items: center;
}

.boxview__media {
--media-margin: 10px;
display: flex;
align-items: center;
justify-content: center;
height: calc(var(--content-height) - var(--thumbnails-track-height));
margin-block-end: var(--media-margin);
overflow: hidden;
/* option = border-radius */
--border-radius: 12px;
border-radius: var(--border-radius);
border: solid 1px red;
}

.boxview__img,
.boxview__video,
.boxview__iframe {
border: solid 1px white;
border-radius: var(--border-radius);
transition: var(--media-transition);
}

.boxview__img:focus,
.boxview__video:focus,
.boxview__iframe:focus {
border: solid 6px white;
}

.boxview__img,
.boxview__video {
max-height: 100%;
max-width: 100%;
}

/* Iframe does not accept % value */

.boxview__iframe {
height: calc( 100vh - var(--thumbnails-track-height) - var(--boxview-control-bar-height) - var(--boxview-padding) * 2 - var(--media-margin));
aspect-ratio: 16/9;
}

.boxview__thumbnails-track {
display: none;
max-width: 100%;
height: calc(var(--thumbnails-track-height) + 12px);
display: grid;
grid-auto-flow: column;
gap: 6px;
grid-auto-columns: var(--media-preview-width);
scroll-behavior: smooth;
overflow-y: hidden;
overflow-x: auto;
overscroll-behavior: contain;
}

.boxview__thumbnails-track_active {
display: block;
}

.boxview__thumbnails-track>* {
width: var(--media-preview-width);
height: calc(var(--thumbnails-track-height));
}

.boxview__thumbnail {
/* option = border-radius */
border-radius: 4px;
transition: all linear 0.2s;
}

.boxview__thumbnail:hover {
border: solid 2px;
/* option = border-color */
border-color: white;
}

/* Scrollbars */

/* Boxview thumbnails scrollbar */

body::-webkit-scrollbar {
width: 0px;
height: 0px;
}

/* Boxview thumbnails scrollbar */

.boxview__thumbnails-track::-webkit-scrollbar {
display: none;
width: 8px;
height: 8px;
}

.boxview__thumbnails-track:hover::-webkit-scrollbar {
display: block;
}

.boxview__thumbnails-track::-webkit-scrollbar-track {
background-color: rgb(40, 40, 40);
border-radius: 100vw;
}

.boxview__thumbnails-track::-webkit-scrollbar-thumb {
background-color: var(--icon-color);
border: 2px solid rgb(40, 40, 40);
border-radius: 100vw;
}

.boxview__thumbnails-track::-webkit-scrollbar-thumb:hover {
background-color: var(--icon-color-hover);
}

/* .boxview__content::-webkit-scrollbar-track {
background: hsl(120 75% 50% / 1);
border-radius: 100vw;
margin-block: 0.5em;
}

.boxview__content::-webkit-scrollbar-thumb {
background: hsl(120 100% 20% / 1);
border: 0.25em solid hsl(120 75% 50% / 1);
border-radius: 100vw;
}

.boxview__content::-webkit-scrollbar-thumb:hover {
background: hsl(120 100% 10% / 1);
} */

/* Controls */

.svg-icon {
fill: var(--icon-color);
transition: all var(--icon-transition);
}

.svg-icon_disable {
fill: var(--icon-color-disable);
}

.svg-icon:hover {
fill: var(--icon-color-hover);
}

.boxview__controls-buttons {
width: 100%;
display: flex;
column-gap: 25px;
}

/* Fullscreen */

.boxview__fullscreen-button {
position: relative;
}

.fullscreen-icon {
position: absolute;
inset-block-start: 0;
inset-block-start: 0;
}

.fullscreen-entry-icon {
visibility: visible;
opacity: 1;
}

.fullscreen-exit-icon {
visibility: hidden;
opacity: 0;
}

/* Share */

.share-options-buttons {
visibility: hidden;
position: absolute;
inset-inline-start: 60px;
width: max-content;
height: max-content;
display: flex;
gap: 15px;
background: rgba(0, 0, 0, 1);
border-radius: 5px;
transition: visibility linear 0.2s;
}

.share-options-buttons_active {
visibility: visible;
}

.boxview__controls-buttons_type_share {
margin-inline-end: auto;
}

.boxview__controls-buttons_type_interactive {
display: flex;
justify-content: center;
}

/* Close */

.boxview__close-button {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}

/* Zoom */

.boxview__zoom-button {
display: none;
}

.boxview__zoom-button_visible {
display: inline-block;
}

/* Thumbnails */

.thumbnails-buttons {
position: relative;
width: 32px;
height: 32px;
}

.boxview__thumbnails-button {
position: absolute;
width: 32px;
height: 32px;
}

.thumbnails-icon {
rotate: 90deg;
}

.boxview__thumbnails-button_icon-filled,
.boxview__thumbnails-button_icon-outlined {
visibility: hidden;
opacity: 0;
}

.boxview__thumbnails-button_active {
visibility: visible;
opacity: 1;
}

/* Navigate */

.boxview__navigation-buttons {
position: relative;
}

.boxview__navigate-button {
position: fixed;
--navigate-button-width: 50px;
width: var(--navigate-button-width);
display: flex;
justify-content: center;
align-content: center;
height: 100%;
z-index: 1;
}

.boxview__navigate-button_before {
inset-inline-start: 0px;
}

.boxview__navigate-button_next {
inset-inline-start: calc(100% - var(--navigate-button-width));
}

*/ .svg-icon_nav {
fill: rgb(180, 180, 180);
transition: transform var(--icon-transition);
}

.boxview__navigate-button:hover .svg-icon_nav {
transform: scale(1.2);
fill: var(--icon-color-hover);
}[/code]

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

[img]https://cdn3.photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg[/img]
[img]https://images.unsplash.com/photo-1662241131527-f57cadcacf32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80[/img]
[img]https://images.unsplash.com/photo-1661565883779-774d498a3a96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80[/img]
[img]https://images.unsplash.com/photo-1661345741272-17a0b691b6da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80[/img]
[img]https://cdn3.photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg[/img]
[img]https://images.unsplash.com/photo-1662241131527-f57cadcacf32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80[/img]
[img]https://images.unsplash.com/photo-1661565883779-774d498a3a96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80[/img]
[img]https://images.unsplash.com/photo-1661345741272-17a0b691b6da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80[/img]
[img]https://cdn3.photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg[/img]
[img]https://images.unsplash.com/photo-1662241131527-f57cadcacf32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80[/img]
[img]https://images.unsplash.com/photo-1661565883779-774d498a3a96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80[/img]
[img]https://images.unsplash.com/photo-1661345741272-17a0b691b6da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80[/img]

Пример 2:

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

const dialog = document.getElementById('dialog');

dialog.showModal();

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

.boxview {
width: 100%;
height: 100%;
border: solid red 3px;
background-color: rgba(0, 0, 0, 0.97);
}

.boxview::backdrop {
background-color: rgba(0, 0, 0, 0.97);
}

.boxview__container {
width: 100%;
height: 100%;
}

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

Я попробовал много удалений и изменений, чтобы найти источник ошибки но я не смог.
p.s: я пометил все элементы красной рамкой, чтобы подчеркнуть ошибку.
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/750 ... th-and-hei