Problem/Motivation

When the height of the dialog title bar is a subpixel value and the height of the dialog is set to a percentage, the resetSize function in dialog.position.js will flip between setting the height to a fixed value and "auto" every time it is called because adjustedValue is rounded by running it through parseInt, whereas the actual height it is being compared to is not rounded and taken straight from event.data.$element.parent().outerHeight().
For instance: if the window height is 946px and the height is set to 75%, adjustedValue will be 709px, but event.data.$element.parent().outerHeight() will be 708.984px, which will cause the evaluation to determine it is smaller than adjustedValue, resulting in the height being set to "auto", and then back to a fixed value which repeats the cycle.
I haven't tested this on 11.x yet, but since the code is the same there, I imagine it might also cause issues under certain circumstances.
I noticed there are efforts to ditch jQuery UI dialog altogether, but I wanted to create this issue regardless, so people running into the same issue have some way to resolve it without being forced to wait for the new dialog implementation to drop.

Steps to reproduce

- Use an admin theme where the dialog title bar has a height with a subpixel value (like Gin, or zoom out 1 step with Claro).
- Open a dialog window whose size is set to a percentage value (in core it's the media library modal).
- Tigger the window resize handler multiple times and notice how the height value on #drupal-modal toggles between "auto" and a numerical pixel value.
(Tested on Chrome)

Proposed resolution

Round the height of the dialog before comparing it to the already rounded adjustedValue.

Remaining tasks

Create MR adding Math.round around event.data.$element.parent().outerHeight().
Review.

User interface changes

n/a

API changes

n/a

Data model changes

n/a

Release notes snippet

Issue fork drupal-3458272

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

seutje created an issue. See original summary.

nod_ made their first commit to this issue’s fork.

nod_’s picture

Version: 10.3.x-dev » 11.x-dev

nod_’s picture

Status: Active » Needs review

Fix in the previous 10.3.x branch was correct, ported to 11.x

nod_’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
nod_’s picture

Status: Reviewed & tested by the community » Needs review

oups

nod_ changed the visibility of the branch 3458272-subpixel-rounding-issue to hidden.

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Seems straight forward

  • nod_ committed 37f50d6d on 10.4.x
    Issue #3458272 by seutje: Subpixel rounding issue causes dialog to...

  • nod_ committed 9d6c9f78 on 11.x
    Issue #3458272 by seutje: Subpixel rounding issue causes dialog to...
nod_’s picture

Version: 11.x-dev » 10.4.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 9d6c9f788c to 11.x and 37f50d6d49 to 10.4.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.