为什么iframe的CSS边框 Flink 以及如何修复它?

tyg4sfes  于 2023-04-13  发布在  Flink
关注(0)|答案(6)|浏览(205)

我有一个使用CSS的iframe边框。当页面调整大小时,边框有时会在Chrome中消失,在Safari中改变大小(在Firefox中没有问题)

是否有已知的解决方法?

  1. const html = `
  2. <style>
  3. body {
  4. background: #DDD;
  5. }
  6. </style>
  7. <body>
  8. <div>hello iframe</div>
  9. </body>
  10. `;
  11. const blob = new Blob([html], {type: 'text/html'});
  12. document.querySelector("iframe").src = URL.createObjectURL(blob);
  1. div {
  2. max-width: 90%;
  3. margin: 0 auto;
  4. }
  5. iframe {
  6. display: block;
  7. border: 1px solid black;
  8. width: 100%;
  9. background: red;
  10. }
  1. <p>Size the window and watch the right border</p>
  2. <!-- src set from JavaScript because offsite iframes are often banned -->
  3. <div>
  4. <iframe></iframe>
  5. </div>

使用其他元素不会出现同样的问题

  1. div {
  2. max-width: 90%;
  3. margin: 1em auto;
  4. }
  5. span, canvas {
  6. display: block;
  7. border: 1px solid black;
  8. width: 100%;
  9. height: 60px;
  10. background: #eee;
  11. }
  1. <p>no issue with other elements</p>
  2. <div>
  3. <span></span>
  4. </div>
  5. <div>
  6. <canvas></canvas>
  7. </div>

请注意,这似乎与iframe中的背景颜色有关。如果我删除背景颜色,则在Chrome中问题消失(尽管不是Safari)

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

qnzebej01#

我仍然在Chrome上看到这个问题(不是在Safari上)。它似乎是边框可视化的一个bug(仍然)。
一个选择是将border的宽度改为0,并设置为outline。然后这种效果就会消失。我不知道这是否是最好的解决方案(轮廓通常用于突出显示焦点/活动元素),但它会接近你所拥有的。
下面是一个仅包含该更改的演示:

  1. const html = `
  2. <style>
  3. body {
  4. background: #eee;
  5. }
  6. </style>
  7. <body>
  8. <div>hello iframe</div>
  9. </body>
  10. `;
  11. const blob = new Blob([html], {type: 'text/html'});
  12. document.querySelector("iframe").src = URL.createObjectURL(blob);
  1. div {
  2. max-width: 90%;
  3. margin: 0 auto;
  4. }
  5. iframe {
  6. display: block;
  7. border: 0;
  8. outline: 1px solid black;
  9. width: 100%;
  10. }
  1. <p>Size the window and watch the right border</p>
  2. <!-- src set from JavaScript because offsite iframes are often banned -->
  3. <div>
  4. <iframe></iframe>
  5. </div>
展开查看全部
v8wbuo2f

v8wbuo2f2#

overflow: hidden;box-sizing: border-box;添加一个 Package 器div对我来说很有用。

  1. const html = `
  2. <style>
  3. body {
  4. background: #eee;
  5. }
  6. </style>
  7. <body>
  8. <div>hello iframe</div>
  9. </body>
  10. `;
  11. const blob = new Blob([html], {type: 'text/html'});
  12. document.querySelector("iframe").src = URL.createObjectURL(blob);
  1. div {
  2. max-width: 90%;
  3. margin: 0 auto;
  4. }
  5. .iframe-wrapper {
  6. border: 1px solid black;
  7. box-sizing: border-box;
  8. width: 100%;
  9. overflow: hidden;
  10. }
  11. iframe {
  12. display: block;
  13. width: 100%;
  14. border: none;
  15. }
  1. <p>Size the window and watch the right border</p>
  2. <!-- src set from JavaScript because offsite iframes are often banned -->
  3. <div>
  4. <div class="iframe-wrapper">
  5. <iframe></iframe>
  6. </div>
  7. </div>
展开查看全部
ymdaylpp

ymdaylpp3#

这是抗锯齿问题。
Chrome通常避免在浮动像素上渲染,以避免抗锯齿。它会尝试移动和调整大小到下一个圆形像素。
在这种情况下,它会切断你的边界,而不是让它泄漏到iframe之外。
你可以通过移动iframe或者通过floating-pixels来调整iframe的大小:

  1. const html = `
  2. <style>
  3. body {
  4. background: #DDD;
  5. }
  6. </style>
  7. <body>
  8. <div>hello iframe</div>
  9. </body>
  10. `;
  11. const iframe = document.querySelector("iframe");
  12. iframe.srcdoc = html;
  13. document.querySelector("input").oninput = function(e) {
  14. iframe.style.marginLeft = this.value + 'px';
  15. };
  1. div {
  2. max-width: 90%;
  3. margin: 0 auto;
  4. }
  5. iframe {
  6. display: block;
  7. border: 1px solid black;
  8. width: 250.5px; /* force a floating pixel width */
  9. background: red;
  10. }
  1. <p>Edit the range and watch the right border</p>
  2. <input type="range" min="0" max="1" value="0" step="0.01">
  3. <!-- src set from JavaScript because offsite iframes are often banned -->
  4. <div>
  5. <iframe></iframe>
  6. </div>

我认为你打开这个问题做得很好,因为它肯定不是预期的行为。
既然你要求一个解决方法,这里有一个,远非完美,这将导致在每个调整大小事件双回流,但应该修复错误...

  1. const html = `
  2. <style>
  3. body {
  4. background: #DDD;
  5. }
  6. </style>
  7. <body>
  8. <div>hello iframe</div>
  9. </body>
  10. `;
  11. const iframe = document.querySelector("iframe");
  12. iframe.srcdoc = html;
  13. addEventListener('resize', resizeFrame, {passive: true});
  14. resizeFrame();
  15. function resizeFrame(_){
  16. iframe.style.width = null; // reset to 100%
  17. // force reflow by calling offsetWidth which is already rounded
  18. iframe.style.width = iframe.offsetWidth + 'px';
  19. }
  1. div {
  2. max-width: 90%;
  3. margin: 0 auto;
  4. }
  5. iframe {
  6. display: block;
  7. border: 1px solid black;
  8. width: 100%;
  9. background: red;
  10. }
  1. <p>Size the window and watch the right border</p>
  2. <!-- src set from JavaScript because offsite iframes are often banned -->
  3. <div>
  4. <iframe></iframe>
  5. </div>

但是请注意,这段代码只处理resize事件,如果你的iframe可以从其他事件(例如DOM manips,CSS等)调整大小,那么你可能需要使用一个 Package 器元素,在上面应用width:100%,并从ResizeObserver的回调中更改iframe的宽度:

  1. const html = `
  2. <style>
  3. body {
  4. background: #DDD;
  5. }
  6. </style>
  7. <body>
  8. <div>hello iframe</div>
  9. </body>
  10. `;
  11. const iframe = document.querySelector("iframe");
  12. iframe.srcdoc = html;
  13. if(window.ResizeObserver) {
  14. const observer = new ResizeObserver(entries => {
  15. iframe.style.width = iframe.parentNode.offsetWidth + 'px';
  16. });
  17. observer.observe(iframe.parentNode);
  18. }
  19. else {
  20. console.log('no support');
  21. }
  1. div {
  2. max-width: 90%;
  3. margin: 0 auto;
  4. }
  5. iframe {
  6. display: block;
  7. border: 1px solid black;
  8. width: 100%;
  9. background: red;
  10. }
  11. .iframe-wrapper {
  12. max-width: none;
  13. width: 100%;
  14. }
  1. <p>Size the window and watch the right border</p>
  2. <!-- src set from JavaScript because offsite iframes are often banned -->
  3. <div>
  4. <div class="iframe-wrapper">
  5. <iframe></iframe>
  6. </div>
  7. </div>

也就是说,在眨眼只有现在...

展开查看全部
qltillow

qltillow4#

上面的答案对我来说都不起作用。起作用的只是将iframe的宽度和高度设置为固定值,而不是百分比:
而不是:

  1. a iframe {
  2. width: 100%;
  3. height: 100%;
  4. border: 1px solid #9af4b4;
  5. }

将其更改为这样,因为iframe无论如何都在固定的widht容器中:

  1. a iframe {
  2. width: 150px;
  3. height: 150px;
  4. border: 1px solid #9af4b4;
  5. }
pxyaymoc

pxyaymoc5#

  1. .ifrmoutr{
  2. border: 1px solid red;
  3. width:100%;
  4. overflow:hidden;
  5. }
  6. .ifrmoutr iframe{
  7. width:100%;
  8. }
  1. <div class="row">
  2. <div class="col-lg-12">
  3. <div class="ifrmoutr">
  4. <iframe></iframe>
  5. </div>
  6. </div>
  7. </div>
t30tvxxf

t30tvxxf6#

对于任何在2022年寻找答案的人来说,上述方法都不起作用,这是唯一对我有效的方法。
将以下CSS添加到iframe

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

相关问题