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

WordPress Trac noreply at wordpress.org
Sat Mar 19 05:57:41 UTC 2016


#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        |  Resolution:
 Keywords:  has-patch     |     Focuses:
--------------------------+--------------------

Old description:

> 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;
> }}}

New description:

 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`. The second `iframe` will initially appear without
 the proper scroll position: only once the `iframe` finishes loading will
 its scroll position be set, and the old `iframe` is removed from the
 document.

 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;
 }}}

--

Comment (by westonruter):

 Are there any issues with using `visibility:hidden` on an `iframe`? I have
 some feeling that it may not work reliably across browsers.

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


More information about the wp-trac mailing list