Modal overlay does not cover the whole browser screen after being resized, while browser zooming to 75% and not scrolled to top of page

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.1.X, 7.2.X, Master
• Fix Version/s: 7.1.10 DXP FP17, 7.1.10.4 SP4, 7.1.X, 7.2.10 DXP FP5, 7.2.10.2 DXP SP2, 7.2.X, 7.3.1 CE GA2, 7.3.2 CE GA3, 7.3.10 DXP GA1, Master
• Component/s: Accessibility, ~ [Archived] Frontend Infrastructure
• Labels:
  • ee-ts
  • liferay-dxp-71-sp4
  • liferay-dxp-72-sp2
  • liferay-fixpack-dxp-17-7110
  • liferay-fixpack-dxp-5-7210
• Branch Version/s:
  7.2.x, 7.1.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/85986

The modal overlay does not cover browser screen after being resized, while browser zooming to 75%.

Steps to reproduce:

• For Windows 10 users, make sure the OS display zoom setting is set to 100%. Check with Windows Settings > System > Display > Scale and layout > 100%
• Start a clean bundle.
• Open a browser with unmaximized window.
• Access http://localhost:8080 and sign in.
• Add enough portlets to the page for there to be a scrollbar
• Sign out
• Set browser zoom to at least 75%. Then reload page.
• Use the scrollbar so that you're no longer at the top of the page, but the sign in link is still visible.
• Click Sign in to show modal form.

 Actual result:

Modal window does not cover whole browser screen, and we can interact with objects behind it.

 Expected result:

Modal window covers whole browser screen regardless of being resized and cannot interact with objects behind it.

Reproduced with:

• Chrome 80.0.3987.122 (Official Build) (64-bit).
• master 8bc1b2f838d1f1b7c66c8188e30d38db8834e429
• 71x b7b070db7725c269e28543e0922aab592378e0b5

Not reproduced with:

• Firefox 71.0 (64-bit) in Windows 10, IE11