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

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

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

Solution

With the following change the popup is opaque and not transparent as I expected:
Increasing transition: opacity 200ms; to transition:opacity 500ms;

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