How can I stop the CSS border of an iframe from flickering and what are some solutions to fix it?

Question

How can I stop the CSS border of an iframe from flickering and what are some solutions to fix it?

I am encountering an issue with my iframe border when using CSS. The problem arises in Chrome where the border disappears upon resizing the page, while Safari changes the size (Firefox appears unaffected)

https://i.sstatic.net/ZUi9z.gif

Are there any known workarounds to fix this?

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

const blob = new Blob([code], {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>Resize the window and observe the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
  <iframe></iframe>
</div>

The issue does not occur when using other elements

div {
  max-width: 90%;
  margin: 1em auto;
}
span, canvas {
  display: block;
  border: 1px solid black;
  width: 100%;
  height: 60px;
  background: #eee;
}

<p>No problems observed with other elements</p>
<div>
  <span></span>
</div>
<div>
  <canvas></canvas>
</div>

It seems that having a background color in the iframe is causing the issue. Removing the background color resolves the problem in Chrome but not in Safari

const code = `
<body>
  <div>hello iframe</div>
</body>
`;

const blob = new Blob([code], {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%;
}

<p>Resize the window and watch the right border</p>
<!-- src set from JavaScript because offsite iframes are often banned -->
<div>
  <iframe></iframe>
</div>

html css google-chrome iframe safari

Answer 1

Answer №1

The issue persists in Chrome but not in Safari, indicating a potential bug in border visualization.

One approach to address this could be to adjust the border width to 0 and utilize an outline instead. This may resolve the problem without impacting the intended design significantly, although outlines are typically used for highlighting active elements.

Check out this demo showcasing the suggested 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>

Answer 2

The issue persists in Chrome but not in Safari, indicating a potential bug in border visualization.

One approach to address this could be to adjust the border width to 0 and utilize an outline instead. This may resolve the problem without impacting the intended design significantly, although outlines are typically used for highlighting active elements.

Check out this demo showcasing the suggested 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>

Answer 3

Answer №2

By including a wrapper div with the properties overflow: hidden; and box-sizing: border-box;, I was able to achieve the desired effect.

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>

Answer 4

By including a wrapper div with the properties overflow: hidden; and box-sizing: border-box;, I was able to achieve the desired effect.

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>

Answer 5

Answer №3

It appears to be a case of antialiasing problem.
To prevent antialiasing, Chrome tends to avoid rendering on floating pixels by moving or resizing the content to the next rounded pixel. This behavior leads to cutting off the border inside the iframe instead of extending it beyond the frame boundary.

To address this issue, you can force the rendering by adjusting either the position or size of the iframe using 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>

Your discovery of this issue is valuable as it deviates from the expected behavior.

If you're looking for a workaround solution, here's an imperfect method that may cause double reflows during each resize event but should rectify the bug...

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

addEventListener('resize', resizeFrame, {passive: true});
resizeFrame();

function resizeFrame(_){
  iframe.style.width = null; // reset to 100%
  // force reflow by calling offsetWidth which is already rounded
  iframe.style.width = iframe.offsetWidth + 'px'; 
}

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>

Note that the provided code addresses only resize events. If your iframe experience resizing from other triggers like DOM manipulations or CSS changes, consider employing a wrapper element with width:100%. From a ResizeObserver callback, adjust your iframe's width accordingly:

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

if(window.ResizeObserver) {
  const observer = new ResizeObserver(entries => {
    iframe.style.width = iframe.parentNode.offsetWidth + 'px';
  });
  observer.observe(iframe.parentNode);
}
else {
  console.log('no support');
}

div {
  max-width: 90%;
  margin: 0 auto;
}
iframe {
  display: block;
  border: 1px solid black;
  width: 100%;
  background: red;
}
.iframe-wrapper {
  max-width: none;
  width: 100%;
}

<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>

Remember to check browser compatibility before implementing this solution, as currently, it is only supported in Blink...

Answer 6

It appears to be a case of antialiasing problem.
To prevent antialiasing, Chrome tends to avoid rendering on floating pixels by moving or resizing the content to the next rounded pixel. This behavior leads to cutting off the border inside the iframe instead of extending it beyond the frame boundary.

To address this issue, you can force the rendering by adjusting either the position or size of the iframe using 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>

Your discovery of this issue is valuable as it deviates from the expected behavior.

If you're looking for a workaround solution, here's an imperfect method that may cause double reflows during each resize event but should rectify the bug...

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

addEventListener('resize', resizeFrame, {passive: true});
resizeFrame();

function resizeFrame(_){
  iframe.style.width = null; // reset to 100%
  // force reflow by calling offsetWidth which is already rounded
  iframe.style.width = iframe.offsetWidth + 'px'; 
}

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>

Note that the provided code addresses only resize events. If your iframe experience resizing from other triggers like DOM manipulations or CSS changes, consider employing a wrapper element with width:100%. From a ResizeObserver callback, adjust your iframe's width accordingly:

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

if(window.ResizeObserver) {
  const observer = new ResizeObserver(entries => {
    iframe.style.width = iframe.parentNode.offsetWidth + 'px';
  });
  observer.observe(iframe.parentNode);
}
else {
  console.log('no support');
}

div {
  max-width: 90%;
  margin: 0 auto;
}
iframe {
  display: block;
  border: 1px solid black;
  width: 100%;
  background: red;
}
.iframe-wrapper {
  max-width: none;
  width: 100%;
}

<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>

Remember to check browser compatibility before implementing this solution, as currently, it is only supported in Blink...

Answer 7

Answer №4

I tried several solutions but found that none of them worked for me. Finally, I discovered a simple fix by setting the width and height of the iframe to a specific value rather than a percentage:

Instead of using:

a iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #9af4b4;
}

I made this adjustment because the iframe was contained within a fixed-width container:

a iframe {
    width: 150px;
    height: 150px;
    border: 1px solid #9af4b4;
}

Answer 8

I tried several solutions but found that none of them worked for me. Finally, I discovered a simple fix by setting the width and height of the iframe to a specific value rather than a percentage:

Instead of using:

a iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #9af4b4;
}

I made this adjustment because the iframe was contained within a fixed-width container:

a iframe {
    width: 150px;
    height: 150px;
    border: 1px solid #9af4b4;
}

Answer 9

Answer №5

.container{
  border: 1px solid blue;
  width:100%;
}
.container iframe{
  width:100%;
}

<div class="row">
  <div class="col-lg-12">
    <div class="container">
      <iframe></iframe>
    </div>
  </div>
  </div>

Answer 10

.container{
  border: 1px solid blue;
  width:100%;
}
.container iframe{
  width:100%;
}

<div class="row">
  <div class="col-lg-12">
    <div class="container">
      <iframe></iframe>
    </div>
  </div>
  </div>

Answer 11

Answer №6

If you're still searching for a solution in 2022 and nothing else seems to help, here's the method that finally resolved the issue for me.

Simply include the following CSS code in the iframe:

clip-path: polygon(1% 1%, 99% 1%, 99% 99%, 1% 99%);

Answer 12

If you're still searching for a solution in 2022 and nothing else seems to help, here's the method that finally resolved the issue for me.

Simply include the following CSS code in the iframe:

clip-path: polygon(1% 1%, 99% 1%, 99% 99%, 1% 99%);

How can I stop the CSS border of an iframe from flickering and what are some solutions to fix it?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Accessing JS code from HTML is not possible in React

Simultaneous display of icon and text on Bootstrap toggle button

Is there a way to verify if an HTML popover is currently displayed?

Apply a patterned background with CSS styling

What is the best way to maintain consistent scaling for elements of varying widths and heights?

Filtering data within a specific date range on an HTML table using JavaScript

Step-by-step guide to keep a table row always visible at the top of the

Conceal the horizontal scrollbar when the navigation menu is minimized

What could be causing the issue with script.onload not functioning properly in a Chrome userscript?

Capturing HTML elements based on their class names using regular expressions

The "Open in new tab" feature seems to be missing for links when using Safari on iOS

Concealing overflow in a sticky container when a fixed child element is present

What strategies can I use to dynamically update the .active class in jquery so it doesn't only target the initial one?

header color scheme and dimensions

Displaying a Facebook tab exclusively within the Facebook platform

Utilize Python and Selenium to extract a URL from HTML code

Creating a fixed "sub-page" within Wicket (e.g.: linking a folder in Wicket)

Unusual marking on the navigation bar

Is it feasible to customize the css3 resize feature?