Fixing OpenLayers Popup position in RTL pages

I’m using OpenLayers V6 popup but It has wired behavior in Right-To-Left page, When I click on my feature my popup shift map to let and it will be appear in right page! But in LTR page It work fine and when I click on feature It will be appear exactly top of feature, How I can fix this OpenLayers popup in RTL pages, I did change position value to fix in ol-ext(openalyers switcher css) and ol.css but It didn’t work.

as demonstrated in image my map is left side but my popup show right side!

This is my code, I inspired from OpenLayers document:

        <div id="map" class="map"> </div>
<div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content">
    </div> 

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

map.on('singleclick', function (evt) {
    //document.getElementById('popup-content').innerHTML ='';
    $('#popup-content').html = '';

var queryLayers =''
         var coordinate = evt.coordinate
  //$('#popup-content').html =''
   var viewResolution = map.getView().getResolution(); 

      wmsLayers.forEach(function(layer, i){
           if (layer.getVisible()) {
           const value = layer.getSource();
           queryLayers = `${value["params_"].LAYERS}`;
      
const url = value["getFeatureInfoUrl"](
    evt.coordinate,
    viewResolution,
     'EPSG:3857',
   {'INFO_FORMAT': 'text/html','QUERY_LAYERS':`${queryLayers}`},
);



if (url) {
    //headers.set('Authorization', 'Basic ' + window.btoa('username' + ":" + 'password'));
    fetch(url, { 
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: new Headers({
        'Content-Type': 'text/html', 
        'Authorization': 'Basic ' +btoa(`${geoUserName}:${geoPass}`),
        
    'Content-Type': 'application/x-www-form-urlencoded',
    }),
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    }).then(function (response) {
         //console.log(response)
  
         return response.text()

 
          
      }).then(function(html) {
        
   $('#popup-content').html(html)

          });

When I change position in DevTools to static popup will show correctly above selected feature.