HTML5 iFrame Seamless Attribute

Question

in HTML5 the iframe has new attributes like 'seamless' that should remove borders and scrollbars. I've tried it but doesn't seem to work, I still can see scrollbars and borders (I'm using Google Chrome as browser), Here's my code:

<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>

Any idea why it's not working?

One more question, is it possible to target a specific section of the page inside the iframe?

The "seamless" attribute is no longer in HTML 5.1 as of the 21 June 2016 HTML 5.1 Candidate Recommendation... and it doesn't seem to be supported by any current browser. — Albert Wiersch, Jun 28 '16 at 19:55

score 142 · Answer 1 · edited Dec 24 '22 at 20:55

Updated: October 2016

The seamless attribute no longer exists. It was originally pitched to be included in the first HTML5 spec, but subsequently dropped. An unrelated attribute of the same name made a brief cameo in the HTML5.1 draft, but that too was ditched mid-2016:

So I think the gist of it all both from the implementor side and the web-dev side is that seamless as-specced doesn’t seem to be what anybody wanted to begin with. Or at least it’s more than anybody actually wanted. And anyway like @annevk says, it’s seems a lot of it’s since been “overcome by events” in light of Shadow DOM.

In other words: purge the seamless attribute from your memory, and pretend it never existed.

For posterity's sake, here's my original answer from five years ago:

Original answer: April 2011

The attribute is in draft mode at the moment. For that reason, none of the current browsers are supporting it yet (as the implementation is subject to change). In the meantime, it's best just to use CSS to strip the borders/scrollbars from the iframe:

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

There's more to the seamless attribute than what can be added with CSS: part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe (acting as though the embedded document was one big nested inside the element, for example).

Lastly, versions of Internet Explorer (8 and earlier) require additional attributes in order to remove the borders, scrollbars and background colour:

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

Naturally, this doesn't validate. So it's up to you how to handle it. My (picky) approach would be to sniff the agent string and add the attributes for IE versions earlier than 9.

`overflow: hidden;` -- not sure that makes any sense in this context. i think seamless is supposed to literally make it a part of the parent document; as such, it's more like being maximised (bottom/top/left/right set to 0, if the iframe is the only element in the document), and it would have appropriate scrolling, as part of the parent document, with all parts of iframe readable. `overflow: hidden` won't do that at all -- it'll only make the iframe document unreadable. — cnst, May 17 '13 at 06:24
> part of the reasoning behind the attribute was to allow nested content to inherit the same styles applied to the iframe // You should go tell that to the guys at Mozilla, because sadly [bug #631218](https://bugzilla.mozilla.org/show_bug.cgi?id=631218) doesn’t seem to mention any of it. Maybe you can add the link to where in the specification it says that. I would really like to see that being implemented. — Evi1M4chine, May 28 '13 at 21:07
This won't work if you need to scroll the iframe, unless you set its dimensions properly. If anyone needs that, find my answer below. http://stackoverflow.com/a/26873886/606885 — Esteban, Nov 11 '14 at 20:27

score 61 · Answer 2 · answered Oct 29 '14 at 13:13

61

According to the latest W3C HTML5 recommendation (which is likely to be the final HTML5 standard) published today, there is no seamless attribute in the iframe element anymore. It seems to have been removed somewhere in the standardization process.

According to caniuse.com no major browser does support this attribute (anymore), so you probably shouldn't use it.

answered Oct 29 '14 at 13:13

Dynalon

6,577
10
54
84

2

THIS IS THE CORRECT ANSWER. @Mauro74 please update the correct answer to the one from dyna – Vad1mo Jun 08 '15 at 13:51
4

However, it is present in the HTML 5.1 working draft (version for 2015-07-09). Looks like it was postponed, not removed. – Tanriol Jul 13 '15 at 21:37
and here is the link to @Tanriol 's comment (version 2015-10-08) http://www.w3.org/html/wg/drafts/html/master/single-page.html#attr-iframe-seamless – retrovertigo Nov 09 '15 at 23:29
More infos about removing seamless attr: https://github.com/whatwg/html/issues/331 and https://github.com/w3c/html/issues/35 – mems Mar 09 '16 at 11:55
Still no major browser support, but it has re-emerged in the HTML5.1 draft: https://www.w3.org/TR/2016/WD-html51-20160310/semantics-embedded-content.html#seamless-iframe – Michael Berry Apr 20 '16 at 09:54
1

The "seamless" attribute is no longer in HTML 5.1 as of the 21 June 2016 HTML 5.1 Candidate Recommendation. – Albert Wiersch Jun 28 '16 at 19:52
@Vadimo I've updated my answer from 5 years ago, which still seems to be getting noticed (if recent upvotes are any indication). Mauro74, you need to update the correct answer - this question is the second result when Googling `iframe seamless`, so it's clear it's getting traffic. – Oct 04 '16 at 01:43

score 31 · Accepted Answer · edited Dec 04 '13 at 21:37

31

It's not supported correctly yet.

Chrome 31 (and possibly an earlier version) supports some parts of the attribute, but it is not fully supported.

edited Dec 04 '13 at 21:37

Sean

2,632
2
27
35

answered Jan 28 '11 at 03:28

delphi

10,705
5
22
18

3

It's supported in chrome now (2013) :) – jave.web Aug 27 '13 at 14:57
This is supported in iOS7 now. – Winfield Sep 23 '13 at 14:12
5

The support in Chrome (tested on 31 beta) is only for the removal of the default borders. The scrollbars are there, the size does not adapt to the requirements of the content, links open inside the inline frame, etc. So only the most trivial part of `seamless` as currently defined is supported, the part that can easily be handled with CSS or with the `frameborder` attribute. – Jukka K. Korpela Oct 07 '13 at 13:57
1

This is answer is not up to date anymore. The correct answer should be updated to the answer from @dyna – Vad1mo Jun 08 '15 at 13:53
Not supported originally, and not supported now. – KTibow Jul 22 '20 at 22:08

score 6 · Answer 4 · answered Aug 04 '12 at 13:10

6

It is possible to use the semless attribute right now, here i found a german article http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html

and here are another presentation about this topic: http://benvinegar.github.com/seamless-talk/

You have to use the window.postMessage method to communicate between the parent and the iframe.

answered Aug 04 '12 at 13:10

volf

809
7
8

1

that presentation was helpful to achieve what seamless would do – digitalPBK Jan 08 '13 at 06:01
The german article is actually very helpful (if you speak german of course). Most interesting to me was that "seamless" is not supported locally (with the file:// protocol) – Marcel Jan 21 '14 at 21:33

score 2 · Answer 5 · answered Jan 27 '14 at 14:14

I thought this might be useful to someone:

in chrome version 32, a 2-pixels border automatically appears around iframes without the seamless attribute. It can be easily removed by adding this CSS rule:

iframe:not([seamless]) { border:none; }

Chrome uses the same selector with these default user-agent styles:

iframe:not([seamless]) {
  border: 2px inset;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}

score 2 · Answer 6 · answered Sep 23 '14 at 12:09

iO8 has removed support for the iframe seamless attribute.

Tested in Safari, HomeScreen, new WKWebView and UIWebView.

Full Details and performance review of other iOS 8 changes:

score 0 · Answer 7 · answered Jan 07 '13 at 03:13

0

You only need to write

seamless

in your code. There is not need for:

seamless ="seamless"

I just found this out myself.

EDIT - this does not remove scrollbars. Strangely

scrolling="no" still seems to work in html5. I have tried using the overflow function with an inline style as recommended by html5 but this doesn't work for me.

answered Jan 07 '13 at 03:13

Yagisanatode

51
3

8

In XHTML, attribute minimization is forbidden, and the seamless attribute must be defined as `` – Oriol Jul 01 '13 at 16:09
5

Not an answer to the question. – Jukka K. Korpela Oct 07 '13 at 13:52
@oriol HTML5 subsumes XHTML and it's totally cool with attribute minimization. – Indolering Nov 09 '13 at 00:33
1

@Indolering Yeah, but I meant that some people (like me) like XHTML's strictness, even when using HTML5. So it's just a personal preference which doesn't solve the question. – Oriol Nov 09 '13 at 00:56
if you want polyglot markup, which usability shouldn't be underestimated, you cannot use minimized attributes – Sebastian Jan 03 '14 at 07:30

score 0 · Answer 8 · answered Sep 19 '13 at 17:47

Use the frameborder attribute on your iframe and set it to frameborder="0" . That produces the seamless look. Now you maybe saying I want the nested iframe to control rather I have scroll bars. Then you need to whip up a JavaScript script file that calculates height minus any headers and set the height. Debounce is javascript plugin needed to make sure resize works appropriately in older browsers and sometimes chrome. That will get you in the right direction.

score 0 · Answer 9 · answered Feb 04 '14 at 18:20

0

Still at 2014 seamless iframe is not fully supported by all of the major browsers, so you should look for an alternative solution.

By January 2014 seamless iframe is still not supported for Firefox neither IE 11, and it's supported by Chrome, Safari and Opera (the webkit version)

If you wanna check this and more supported options in detail, the HTML5 test site would be a good option:

http://html5test.com/results/desktop.html

You can check different platforms, at the score section you can click every browser and see what's supported and what's not.

answered Feb 04 '14 at 18:20

Juan Carlos Alpizar Chinchilla

880
9
23

According to the html5test.com site, it is *not* supported by Chrome or Opera either. Support is only said to exist in Safari 7 (not earlier versions). Can anyone confirm that support exists even there? – Jukka K. Korpela Feb 10 '14 at 06:07
that's a serious flaw, I've used seamless iframes in Opera (webkit version as mentioned before) and Chrome and they work... here's a working example (move across slides) http://acuitytec.com/howWorks_newhover.html try to watch it and firefox vs Opera, you'll notice in chrome and opera the content looks centered, while in FF it shows at the left side. I personally ran the tests by January 2014, maybe something changed, but after checking this website I linked today, it still seems to be working in the same way as described before – Juan Carlos Alpizar Chinchilla Feb 10 '14 at 06:32
In any case, the reference to html5test.com does *not* support the statements in the answer. And you would need to specify how your exampe supports the claim about support. “Looking centered” isn’t convincing, since the major part of the meaning of `seamless` is functional. – Jukka K. Korpela Feb 10 '14 at 07:07
They did by january when the first post was made, I contacted to the html5test.com site for a clarification about this. A seamless iframe should be able to apply CSS styles that apply to the to the contained document before styles specified in that document. Those iframes have a css class to center the iframe in the parent container, the seamless attribute makes it possible to inherit this in the way is made, just take a look at the css styles, and remove the seamless attribute and check what happens, you'll notice the iframe css class is ignored when you remove the seamless attribute – Juan Carlos Alpizar Chinchilla Feb 10 '14 at 07:42

score 0 · Answer 10 · answered Nov 11 '14 at 20:25

I couldn't find anything that met my requirements, hece I came up with this script (depends on jQuery):

https://gist.github.com/invernizzie/95182de86ea9dc5daa80

It will resize the iframe to the viewport size (taking into account wider content). It could use an improvement to use the viewport height instead of the content height, in the case that the former is bigger.

HTML5 iFrame Seamless Attribute

10 Answers10

Updated: October 2016

Original answer: April 2011

Linked