Make WordPress Core

Opened 5 years ago

Last modified 4 years ago

#46911 new defect (bug)

iframe in update-core.php

Reported by: madivad's profile madivad Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 5.1.1
Component: Upgrade/Install Keywords:
Focuses: ui, administration Cc:


Flagged as component "upgrade/install" purely because i see nothing for core, and plugin/theming are two seperate areas

update_core uses an iframe to display the update progress. The problem with this it uses height:100% (which does not cause browsers to use the whole available space, I wish it did, but alas), and a min-height property which is set sufficiently small enough to not make small browsers force scrolling, but not large enough to fill even half of the usable space on my desktop. Often leaving a large void, and a scroll bar at the side which isn’t immediately obvious.

As far as I've ever noticed, this is the only place (in themes and plugin updates) this is specifically used, although anywhere that uses frames, it's possible. Many other places scroll elegantly, just not here.

The only solutions I have involve jquery or similar scripting, albeit relatively minor (ie requesting page size and injecting it into the document). Is this type of scripting taboo in WP?:

  1. As mentioned, retrieve the page height when loaded and insert that into div.wrap.
  2. Make sure each parent above the iframe is set to 100% (caveat below).
  3. don't use an iframe!

I have tried mucking around with it, unfortunately it is only testable when you have several plugins or themes that need updating and I've just finished all the updates I need to do.

The only way I can get it to achieve 100% of the usable space is to manually add “height 100%” to each of the parents above it. This isn't elegant as it spreads over the "thank you for creating with wordPress" and the version number at the bottom. Obviously the last div#WPWRAP goes too far, or, probably more correctly, this is influenced by the fact #wpfooter is positioned absolutely to the bottom and they simply overlap.

I would love to actually have a solution, as i'd love to contribute, but I don't know the fix (other than not using an iframe!).

Change History (2)

#1 @SergeyBiryukov
5 years ago

  • Focuses ui administration added

#2 @tim.wakeling
4 years ago

This is a fairly significant issue actually, because sometimes the last text you can see is the text with the "..." which indicates the process is still ongoing, when it isn't. It's not clear there is an iframe with a scrollbar at all, and I have often missed it. The links to go back are also hidden below the bottom if the content exceeds the height.

Is the solution perhaps to make the height of the iframe calc( 100vh - 84px ) instead of 100%? The 84px is made up of 42px for the height of the "Update Plugins" heading, the margin on the wrap div, and the height of the admin bar at the top. I daresay these can and perhaps should be calculated relatively but I'm not quite sure. Though having the iframe larger than the total height isn't a huge problem is it? So maybe just 100vh is fine.

Note: See TracTickets for help on using tickets.