style Visibility:visible is not working intermittently on IE11(works fine on chrome and firefox)

Question

I have a pop up on button click to be displayed on the view.I'm using visibility: visible to show the popup it works fine with chrome and firefox and the class is getting inherited from the design system itself.where as on IE11 it's transparency is high while I want it to be opaque.can I overwrite the parent class which is getting inherited from the design system? or any other solution I have tried with

opacity: 1;
z-index: 1;
background-color: rgba(white,100%);
transition: opacity 200ms;
visibility: visible

Nothing works while tried with !important too or overwriting the inherited class

Answer 1

I resolved this by increasing transition : opacity 200ms to transition :opacity 500ms it works fine now the popup is opaque not transparent as i expected

opacity: 1;
z-index: 1;
background-color: rgba(white,100%);
transition: opacity 500ms;
visibility: visible