Q:

Iframe sets wrong width

I have a page having iframe whose width is assigned dynamically from jquery. Whatever width I set through jquery, the value is incremented automatically and assigned to iframe. I don't understand how and where it changes.

$("#contentViewer").width("1023px");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <iframe id="contentViewer"></iframe>
</div>

element rendered in a browser(copied HTML from browser inspect element)
<iframe id="contentViewer" style="width: 1026.98px;"></iframe>

I expect iframe width to be 1023px, but the iframe rendered with width 1026.98px
On inspecting external CSS includes, I came to know bootstrap CSS makes an issue. if I remove bootstrap CSS than iframe working fine. The bootstrap version I used is 4.3.1

A:

The issue was coming due to CSS property inherited from bootstrap.
the property was:
*, ::after, ::before {
    box-sizing: border-box;
}

I changed it to:
iframe, ::after, ::before {
    box-sizing: unset;
}

Now iframe set exact value which I assign

