Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#28800 closed defect (bug) (fixed)

Media Grid View: Modals cut pictures off in Firefox

Reported by: mikeyarce's profile mikeyarce Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords:
Focuses: Cc:


In the Media Library Grid View, when you click on an image, a modal pops up with the image information details and thumbnail. In Firefox, the image width overflows the container.


Steps to reproduce:

  1. Download the latest version of trunk
  2. Open the Media Library in FIrefox
  3. Click on an image (make sure it's a fairly large image to begin with)
  4. You will see the image overflows it's container.

Issue replicated on Firefox 25, 26, 27, 28, 29 and 30 and IE 9, 10, 11 (both Mac and PC)
Does not happen on Chrome or Safari

I had a look at the CSS and it looks like the issue is happening because of a problem with max-width not being set properly for Firefox. I made 2 changes that fixed the issue and now the images are also responsive to their containers which looks even better in mobile devices.

I've attached my patch to this ticket.

Once the patch is applied, here's what it looks like:

On a small device:

Attachments (1)

media-views.css.diff (569 bytes) - added by mikeyarce 10 years ago.

Download all attachments as: .zip

Change History (7)

#1 @mikeyarce
10 years ago

  • Summary changed from Media Grid view Modals cut pictures off in Firefox to Media Grid View: Modals cut pictures off in Firefox

#2 @helen
10 years ago

We need to figure out something better for the size of the image and probably what info is displayed over there in general (perhaps none at all besides the image), but adding this for now to make it acceptable for beta.

#3 @helen
10 years ago

In 29055:

Better styling for the larger image preview in the attachment details modal. Portrait images still have problems in Firefox due to percentage height. props mikeyarce for the initial patch. see #28800, #24716.

#4 @ocean90
10 years ago

  • Milestone changed from Awaiting Review to 4.0

#5 @ocean90
10 years ago

Related: #28844

#6 @helen
10 years ago

  • Resolution set to fixed
  • Status changed from new to closed

Fixed in [29204].

Note: See TracTickets for help on using tickets.