Material: bug(input): "Disabled" border does not display at different zoom levels

[codymikol]

Bug, enhancement request, or proposal: Bug

CodePen and steps to reproduce the issue:

CodePen Demo

This was reproduced on the latest AngularJS Material documentation (1.1.19)

(See the company disabled field)

Detailed Reproduction Steps:

1. On a device with a retina display keep zooming in and out
2. At different levels of zoom the border for disabled fields will occasionally disappear

What is the expected behavior?

The border is always visible.

What is the current behavior?

The border becomes invisible at different levels of zoom on retina displays.

What is the use-case or motivation for changing an existing behavior?

This can be very visually disorienting.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.8
• AngularJS Material: 1.1.0-rc.3+
• OS: OSX
• Browsers: Chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

@bersLucas has suggested this might be solved by using: css-media-resolution

I thought this was working fine at one point and so I did some digging, it looks like this worked fine previous to 1.1.0-rc4 which hopefully narrows this down quite a bit.

EDIT: To clarify, the breaking change was introduce somewhere between the release of 1.0.9 and 1.1.0-rc4, I was not looking at the all of the tags, only the ones on github 🐔

DOUBLE EDIT: I tried to bisect, but this is such an early version that I could not get npm install to work 🐔

[codymikol]

The description on this one really seems to fit the bill...

This commit caused the regression, reverting these changes makes the border always appear in 1.1.19

4bff2bbe99192504a9f79d30c2b21bf44bdce993

I still need to figure out what exactly the commit was trying to accomplish.

EDIT: It looks like the first file modified can stay the same and fixed an issue with disabled fieldsets.

EDIT: It looks like the second file modified was done to ensure the disabled input border and the enabled input border lined up on enable / disable. I'm going to test this out.

[Splaktar]

That's quite an odd edge case. Thank you for investigating.

Are we sure that this isn't a bug in Chrome?

[codymikol]

Ah, it does seem to only happen in chrome. I think this issue has been present for around a year. Should I make an issue with the chrome ticketing system and close this?

[Splaktar]

Yeah, I would open a bug on crbug.com and link this issue and that new issue in both directions. We can leave this open for a bit until we get some feedback from the Chrome team.

[codymikol]

I opened an issue over at crbug
I was unable to produce a test case for them outside the scope of this project, hopefully the docs example will suffice.

[Splaktar]

Thank you. It might be helpful to post a CodePen reproduction in the Chrome bug so that they can more readily debug it.

[codymikol]

There has been a ticket open since 2017 https://bugs.chromium.org/p/chromium/issues/detail?id=793785

[Splaktar]

Looks like the Chromium team plans to fix this soon. They were hoping for M 76, but maybe they can get it into M 78-80.

[Splaktar]

Fixed https://bugs.chromium.org/p/chromium/issues/detail?id=994046#c6. Unsure which version of Chrome this will go into, but maybe 81.

[codymikol]

🙉 I can't believe it finally happened