Ticket #52116: 52116.diff

src/wp-content/themes/twentytwenty/assets/js/index.js

@@ -169 +169 @@
         // Hide and show modals before and after their animations have played out.
         hideAndShowModals: function() {
                 var _doc = document,
-                        _win = window,
-                        modals = _doc.querySelectorAll( '.cover-modal' ),
-                        htmlStyle = _doc.documentElement.style,
-                        adminBar = _doc.querySelector( '#wpadminbar' );
-
-                function getAdminBarHeight( negativeValue ) {
-                        var height,
-                                currentScroll = _win.pageYOffset;
-
-                        if ( adminBar ) {
-                                height = currentScroll + adminBar.getBoundingClientRect().height;
-
-                                return negativeValue ? -height : height;
-                        }
-
-                        return currentScroll === 0 ? 0 : -currentScroll;
-                }
-
-                function htmlStyles() {
-                        var overflow = _win.innerHeight > _doc.documentElement.getBoundingClientRect().height;
-
-                        return {
-                                'overflow-y': overflow ? 'hidden' : 'scroll',
-                                position: 'fixed',
-                                width: '100%',
-                                top: getAdminBarHeight( true ) + 'px',
-                                left: 0
-                        };
-                }
+                        modals = _doc.querySelectorAll( '.cover-modal' );
 
                 // Show the modal.
                 modals.forEach( function( modal ) {
                         modal.addEventListener( 'toggle-target-before-inactive', function( event ) {
-                                var styles = htmlStyles(),
-                                        offsetY = _win.pageYOffset,
-                                        paddingTop = ( Math.abs( getAdminBarHeight() ) - offsetY ) + 'px',
-                                        mQuery = _win.matchMedia( '(max-width: 600px)' );
 
                                 if ( event.target !== modal ) {
                                         return;
                                 }
 
-                                Object.keys( styles ).forEach( function( styleKey ) {
-                                        htmlStyle.setProperty( styleKey, styles[ styleKey ] );
-                                } );
-
-                                _win.twentytwenty.scrolled = parseInt( styles.top, 10 );
-
-                                if ( adminBar ) {
-                                        _doc.body.style.setProperty( 'padding-top', paddingTop );
-
-                                        if ( mQuery.matches ) {
-                                                if ( offsetY >= getAdminBarHeight() ) {
-                                                        modal.style.setProperty( 'top', 0 );
-                                                } else {
-                                                        modal.style.setProperty( 'top', ( getAdminBarHeight() - offsetY ) + 'px' );
-                                                }
-                                        }
-                                }
-
                                 modal.classList.add( 'show-modal' );
                         } );
 
                         // Hide the modal after a delay, so animations have time to play out.
                         modal.addEventListener( 'toggle-target-after-inactive', function( event ) {
+
                                 if ( event.target !== modal ) {
                                         return;
                                 }
 
                                 setTimeout( function() {
-                                        var clickedEl = twentytwenty.toggles.clickedEl;
 
                                         modal.classList.remove( 'show-modal' );
 
-                                        Object.keys( htmlStyles() ).forEach( function( styleKey ) {
-                                                htmlStyle.removeProperty( styleKey );
-                                        } );
-
-                                        if ( adminBar ) {
-                                                _doc.body.style.removeProperty( 'padding-top' );
-                                                modal.style.removeProperty( 'top' );
-                                        }
-
-                                        if ( clickedEl !== false ) {
-                                                clickedEl.focus();
-                                                clickedEl = false;
-                                        }
-
-                                        _win.scrollTo( 0, Math.abs( _win.twentytwenty.scrolled + getAdminBarHeight() ) );
-
-                                        _win.twentytwenty.scrolled = 0;
                                 }, 500 );
                         } );
                 } );

src/wp-content/themes/twentytwenty/style.css

@@ -1333 +1333 @@
 
 /* Cover Modals ------------------------------ */
 
+body.showing-modal {
+        overflow: hidden;       
+}
+
 .cover-modal {
         display: none;
         -ms-overflow-style: none;
@@ -1346 +1350 @@
 .cover-modal.show-modal {
         display: block;
         cursor: pointer;
+        position: fixed;
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .cover-modal.show-modal > * {