WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#28800 closed defect (bug) (fixed)

Media Grid View: Modals cut pictures off in Firefox

Reported by: mikeyarce Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords:
Focuses: Cc:
PR Number:

Description

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.

Example:
https://mikeyarce.files.wordpress.com/2014/07/screen-shot-2014-07-09-at-7-33-29-am.png

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:

https://mikeyarce.files.wordpress.com/2014/07/screen-shot-2014-07-09-at-7-54-33-am.png

On a small device:
https://mikeyarce.files.wordpress.com/2014/07/screen-shot-2014-07-09-at-7-55-38-am.png

Attachments (1)

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

Download all attachments as: .zip

Change History (7)

#1 @mikeyarce
5 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
5 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
5 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
5 years ago

  • Milestone changed from Awaiting Review to 4.0

#5 @ocean90
5 years ago

Related: #28844

#6 @helen
5 years ago

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

Fixed in [29204].

Note: See TracTickets for help on using tickets.