Why does the CSS border of an iframe flicker and how to fix it?

I have an iframe border using CSS. As the page is resized the border sometimes disappears in Chrome and changes size in Safari (it's fine in Firefox)

Is there a known workaround?

const html = `
<style>
body { 
  background: #DDD;
}
</style>
<body>
  <div>hello iframe</div>
</body>
`;

const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
  max-width: 90%;
  margin: 0 auto;
}
iframe {
  display: block;
  border: 1px solid black;
  width: 100%;
  background: red;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
  <iframe></iframe>
</div>

Adding a wrapper div with overflow: hidden; and box-sizing: border-box; works for me.

const html = `
<style>
body { 
  background: #eee;
}
</style>
<body>
  <div>hello iframe</div>
</body>
`;

const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
  max-width: 90%;
  margin: 0 auto;
}
.iframe-wrapper {
  border: 1px solid black;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
iframe {
  display: block;
  width: 100%;
  border: none;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
  <div class="iframe-wrapper">
     <iframe></iframe>
  </div>
</div>

Prevent White Flash While Iframe Loads, How to prevent an iframe from flashing white while the page is loading. An ugly problem when the background of your site is anything other� It’s the jquery. As you size down the iframe it looks like the jquery readjusts it some way causing it to flicker. The question is if that problem is big enough for you to have to re-think whatever your trying to achieve. If not leave it that way. Or find a solution :P


I still see the issue on Chrome (not on Safari). It seems like a bug in visualization of the border (still).

One option could be to change the border to have a width of 0 and set an outline instead. Then this effect goes away. I don't know if it would be the best solution (outlines are used often to highlight focused/active elements), but it would be close to what you have.

Here is a demo just with that change:

const html = `
<style>
body { 
  background: #eee;
}
</style>
<body>
  <div>hello iframe</div>
</body>
`;

const blob = new Blob([html], {type: 'text/html'});
document.querySelector("iframe").src = URL.createObjectURL(blob);
div {
  max-width: 90%;
  margin: 0 auto;
}
iframe {
  display: block;
  border: 0;
  outline: 1px solid black;
  width: 100%;
}
<p>Size the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
  <iframe></iframe>
</div>

Avoid CSS flickering, This CSS rule is designed to fix the flicker effect on Chrome-based browsers, applied to the HTML flickering element. But use it wisely : this rule� CSS Property Reference. Specifies the border of the iframe. Codes and Examples.


This is an antialiasing issue. Chrome generally avoids rendering on floating pixels, to avoid antialiasing. It will try to move and resize to the next rounded pixels. In this case, it will cut off your border instead of making it leak outside of the iframe.

You can force it by either moving or resizing your iframe by floating-pixels:

const html = `
<style>
body { 
  background: #DDD;
}
</style>
<body>
  <div>hello iframe</div>
</body>
`;
const iframe = document.querySelector("iframe");
iframe.srcdoc = html;

document.querySelector("input").oninput = function(e) {
  iframe.style.marginLeft = this.value + 'px';
};
div {
  max-width: 90%;
  margin: 0 auto;
}
iframe {
  display: block;
  border: 1px solid black;
  width: 250.5px; /* force a floating pixel width */
  background: red;
}
<p>Edit the range and watch the right border</p>
<input type="range" min="0" max="1" value="0" step="0.01">
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
  <iframe></iframe>
</div>

Fixed element flicker within an iframe on iOS, <h1>Header</h1> <p>Content</p> </div> <button class="fixed-button">This is flickering</button> </div> </div> </body> </iframe> CSS iframe { border: none;� If you know a programmer it's pretty easily possible using the API and any Jquery or javascript based slideshow. I may have to do this soon as I am in the same situation. Client's website broke (was using iframe) Posted 76 months ago. ( permalink) theladieus says: Looks like this might be the ticket here


.ifrmoutr{
  border: 1px solid red;
  width:100%;
  overflow:hidden;
}
.ifrmoutr iframe{
  width:100%;
}
<div class="row">
  <div class="col-lg-12">
    <div class="ifrmoutr">
      <iframe></iframe>
    </div>
  </div>
  </div>

html - 为什么iframe的CSS边框会闪烁,如何解决?, Why does the CSS border of an iframe flicker and how to fix it?. I have an iframe border using CSS. As the page is resized the border sometimes disappears in� Most commonly, it’s the result of loading Ajax partials. Ajax is asynchronous, meaning nothing is waiting for it to finish. But when it does finish, and the results are plopped into the document, it can cause re-layout and push other elements around.


Safari border-radius + overflow: hidden + CSS transform fix � GitHub, You are a wonderful person. I've seen so many posts recommending the transform: perspective(); solution for this weird bug (mine is coupled with the GSAP� For the last element, there’s obviously no flicker effect since it doesn’t have any following elements. Fortunately, several options are available to fix that :-webkit-backface-visibility: hidden; This CSS rule is designed to fix the flicker effect on Chrome-based browsers, applied to the HTML flickering element.


Map flickers/bounces when animating in unfocused iframe on , GitHub is home to over 50 million developers working together to host and is, the 7th ancestor isn't a particularly interesting element from a CSS perspective, Removing the border-radius instantly fixed the issue for us. So, the problem i faced was in a custom popup where i had a wheel effect on the cross button using css transition. But that caused flicker issue in the popup. After visiting various online portals, i got to know that transition property: -webkit-backface-visibility: hidden; on the transitioned element really works and stops the flickering.


Css Flickering, HTML and CSS are the prime parts of a webpage. animation-delay. to be 1px above the border), the background color flickers off and on continuously, at a Android - Cast/Mirror the screen to a PC, TV or Chromecast; How to fix adb The reason this is bad is that the CSS will hide the iframe no matter what and users� Iframes and Security . The iframe element, by itself, is not a security risk to you or your site visitors.Iframes have gotten a bad reputation because they can be used by malicious websites to include content that can infect a visitor's computer without them seeing it on the page, by incorporating links pointing to the invisible iframe, and those scripts set off malicious code.