Modal custom

basic.html

<button data-toggle="modal" data-target="#modal_aside_right" class="btn btn-primary" type="button">  Modal aside right  </button>

<div id="modal_aside_right" class="modal fixed-right fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-aside" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Right fixed sample</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div> <!-- modal-bialog .// -->
</div> <!-- modal.// -->

style.css

.modal .modal-dialog-aside{ 
	width: 350px; max-width:80%; height: 100%; margin:0;transform: translate(0); transition: transform .2s;
}
.modal .modal-dialog-aside .modal-content{  height: inherit; border:0; border-radius: 0;}
.modal .modal-dialog-aside .modal-content .modal-body{ overflow-y: auto }
.modal.fixed-left .modal-dialog-aside{ margin-left:auto;  transform: translateX(100%); }
.modal.fixed-right .modal-dialog-aside{ margin-right:auto; transform: translateX(-100%); }
.modal.show .modal-dialog-aside{ transform: translateX(0);  }

i am having problems with some computers in abos the computers use chrome in the latest version.
in one it appears correctly, in the other only a gray screen

working
<div _ngcontent-xit-c205="" id="modal_aside_right" tabindex="-1" class="modal fixed-right fade show" style="display: block; padding-right: 17px;" aria-modal="true" role="dialog">,

with error
<div _ngcontent-dkj-c205="" id="modal_aside_right" tabindex="-1" class="modal fixed-right fade" style="padding-right: 17px;" role="dialog">

the difference is that in a browser, boostrap can put the class show and the display: block, but on the other machine it cannot do this