Text in fields disappeared/became invisible when page item in focus/clicked on.

Bigal

APEX vesion 20.2

Chrome version 94.0.4606.81

Using Universal Theme - 42

This issue only happened a week or so ago and only on Modal windows. Upon clicking on a field (e.g. text field or select list), the text becomes invisible. For text fields, you cannot see what you are typing but upon losing focus of the field, the text becomes visible.

This is not happened in Normal Windows, only Modal.

This seems to happen after upgrading to Chrome v94 but cannot be sure if that is the cause.

It is also not happening on all machines with the same version of Chrome. Also, it does not happen on Firefox and IE/MS Edge.

Have anyone encountered this?

Bigal

Thanks for setting the record straight. While trying to fix this issue, I was actually trying to do a little bit more - when I click on the a field, I wanted an oragne border around the field. Somehow, if I set the border for the non-focused classes to 1px, the solution didn't work.

This is my full CSS:

.apex-item-select, .apex-item-text, .apex-item-textarea {

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

-ms-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

border: 1.1px solid #dfdfdf;

}

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

border: 1px solid #f7921e;    

outline: #f7921e solid 1px !important;

}

Anyway, I tried it with only the "focus" CSS and it will work with just 1px border e.g.

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

border: 1px solid #dfdfdf;

}

User_5TZ74

Hi, I'm facing the same strange issue.

I also use Chrome version 94.0.4606.81 and it happens on one machine while not on another with the same chrome version. I also tried MS Edge, which is not affected by this behaviour.

The modal pages become practically unusable over night.

Does anyone have an idea?

Thanks!

Creg

Apex versions 20.2 and 21.1

Chrome version 94.0.4606.81

We are also experiencing exactly this issue - Chrome v94, with both Apex v20.2 and v21.1, on both Mac and Windows. However only some users are encountering it, not all of us are able to reproduce it, despite being on the same version of Chrome. Firefox and Edge are fine.

Bigal

I managed to work around this issue by applying custom CSS. Still none the wiser as to the cuase.

I applied the following custom CSS to the theme roller and the problem went away. Not the most elegant of solution but I needed to fix it fast.

.apex-item-select, .apex-item-text, .apex-item-textarea {

border: 1.1px solid #dfdfdf;

}

If the border is 1px, the disappearing act happens so I set it to 1.1px and it stop disappearing.

User_5TZ74

The inline CSS didn't work for me. The border gets set but that doesn't change the behaviour on click.

Creg

If you try adding ":focus" onto the end of each item in the list - it should take effect when the item receives the focus

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

border: 1.1px solid #dfdfdf;

}

User_5TZ74

Perfect, that solution worked. Thank you very much!

Bigal

Thanks for setting the record straight. While trying to fix this issue, I was actually trying to do a little bit more - when I click on the a field, I wanted an oragne border around the field. Somehow, if I set the border for the non-focused classes to 1px, the solution didn't work.

This is my full CSS:

.apex-item-select, .apex-item-text, .apex-item-textarea {

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

-ms-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

border: 1.1px solid #dfdfdf;

}

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

border: 1px solid #f7921e;    

outline: #f7921e solid 1px !important;

}

Anyway, I tried it with only the "focus" CSS and it will work with just 1px border e.g.

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

border: 1px solid #dfdfdf;

}

User_QPAO4

Hello everyone I have the exact same problem. Is there any more in-depth solution ???

miran213

https://community.oracle.com/tech/developers/discussion/comment/16811914#Comment_16811914

This version of the CSS fix helped us. Thanks Creg and Bigal!

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

	border: 1.1px solid #dfdfdf;

}

The "orange" version that Bigal suggested only worked for us on some page fields, but not all. Also, we had to put the 1.1px on the border because with the 1px it didn't work on any of the affected fields.

We can't pinpoint the cause. We are all on the latest Chrome build and some of us have the problem, some don't. Also, our Windows builds are all over the place so that doesn't help us either; on my PC, Version 10.0.18363 Build 18363, it works, on an older Build 15-something and a never Build 19-something it doesn't .

Tim Kimberl-Oracle

This is an interesting bug, I am curious for those running into this issue. What is your browser zoom level? Is this happening at 100% zoom level? If so... what is your operating system resolution/dpi set at?