[wp-trac] [WordPress Trac] #36276: Refreshed Customizer preview iframe shows before initialized

[WordPress Trac]

#36276: Refreshed Customizer preview iframe shows before initialized
--------------------------+-----------------------
 Reporter:  westonruter   |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  4.5
Component:  Customize     |    Version:  trunk
 Severity:  normal        |   Keywords:  has-patch
  Focuses:                |
--------------------------+-----------------------
 I've noticed that when the Customizer preview is refreshed while the user
 has scrolled down from the top, the refreshed iframe will momentarily be
 displayed being scrolled to the top before scroll back to the scroll
 position at the time the refresh was requested. This issue was not present
 in 4.4. Here's a depiction of problem: https://cloudup.com/c1V95W-wXkJ

 I've traced the issue down the regression to [36532] with the introduction
 of the device preview functionality (#31195). Specifically, it seems this
 change is causing the problem:

 {{{#!diff
   #customize-preview iframe {
         width: 100%;
         height: 100%;
 +       position: absolute;
   }
 }}}

 When the preview is being refreshed, a second `iframe` is inserted as the
 next sibling of the existing `iframe`. Because they now have
 `position:absolute`, the second `iframe` now is getting displayed on top
 of the first iframe.

 Here is why `position:absolute` was introduced:
 https://core.trac.wordpress.org/ticket/31195#comment:79

 This fixes the issue for me:

 {{{#!diff
 --- src/wp-admin/css/customize-controls.css
 +++ src/wp-admin/css/customize-controls.css
 @@ -613,6 +613,9 @@ p.customize-section-description {
         height: 100%;
         position: absolute;
  }
 +#customize-preview iframe + iframe {
 +       visibility: hidden;
 +}

  .wp-full-overlay-sidebar {
         background: #eee;
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36276>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform