What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc.

The issue can be easily replicated with this code snippet: https://codepen.io/jamadeo/pen/LYJMzEG

When using src along with an inlined data URI, the div fills the entire height of the iframe:

<iframe src="data:text/html,<div style=&quot;background-color: red; height: 100%&quot;>hello, world</div>"></iframe>

However, when using srcdoc, the div is only the height of its content.

<iframe srcdoc="<div style=&quot;background-color: red; height: 100%&quot;>hello, world</div>"></iframe>

This discrepancy between the two methods was unexpected. While researching differences in behavior between src and srcdoc, I found ample information on cross-origin issues and browser compatibility, yet nothing regarding rendering discrepancies.

htmlcssiframe

Answer №1

srcdoc automatically creates a document in standards mode, while src does not. To achieve the same result, you must include <!DOCTYPE html> at the beginning of the src content.

For detailed guidelines, refer to HTML living standard, 13.2.6.4.1 The "initial" insertion mode and pay attention to sections that mention "if the document is not an iframe srcdoc document..."

<iframe src="data:text/html,<!DOCTYPE html><div style=&quot;background-color: red; height: 100%;&quot;>hello, world</div>"></iframe>

<iframe srcdoc="<div style=&quot;background-color: red; height: 100%;&quot;>hello, world</div>"></iframe>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position items at the center of the grid in material UI

I am having difficulty centering the grid items of material UI. I have tried using the justifyItems and alignItems props as mentioned in the documentation, but I'm still unable to achieve the desired result. Can anyone provide some guidance? Below is ...

javascripthtmlcssreactjsmaterial-ui

Utilizing web components in React by solely relying on a CDN for integration

I have a client who has provided us with a vast library of UI elements that they want incorporated into our project. These elements are stored in javascript and css files on a CDN, and unfortunately I do not have access to the source code. All I have at my ...

javascripthtmlreactjstypescriptweb-component

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

htmlcssframeworks

Disable checkboxes upon page initialization

I am working with a form that includes checkboxes. Whenever the page loads, clicking on the checkboxes automatically checks them. However, I am looking for a solution where the checkboxes are disabled or not clickable during the page load process. Once th ...

javascriptphphtml

Make sure to blur all images whenever one of them is clicked

I am currently facing an issue with my webpage where I have 3 images displayed. I have implemented an event listener to detect clicks on the images, and once a click occurs on one of them, I want everything else on the page to become blurred, including the ...

javascripthtmlcss

Troubleshooting the issue with the <div> tag in ASP.NET MVC 2 and the "float: left;" property. Any solutions to

Issue with the usage of <div> elements Everything runs smoothly: Text "Whatever" appears in column 1, followed by a radio button: No issues here (text without a radio button): The cell immediately following the text "Whatever" should display in co ...

htmlcssasp.net-mvc-2

Creating AngularJS variables with dependencies on integer values

Hello, I am a brand new developer and I am currently working on creating an expenses calculator. The goal is to have the sum of inputted integers from a table, each with a default value, become the integer value of another variable. However, I seem to be m ...

javascriptangularjshtmlscopedata-modeling

Creating a default option of "please select" on an Angular select element with a null value for validation

Within my Angular application, I am using a select element with an ngFor loop: <select formControlName="type" required> <option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option> </select> When view ...

htmlangularangular2-templateangular2-forms

Is there a way to connect CSS files from a different directory?

I'm currently in the process of developing a website and I encountered an issue with linking my CSS file, which is stored in a different folder. I originally had it in the same directory as my HTML code, but now I need to figure out how to link it pro ...

htmlcss

Comparing Ajax HTML with XML/JSON responses: which is better for speed or other considerations

I have a website that heavily relies on ajax, and I insert around 3k html formatted pages into the DOM through ajax requests. My current approach involves inserting the entire html responses using jQuery. However, another option is to output in xml or jso ...

htmlxmlajaxjson

Can CKEditor be integrated with Mutation Observer? If so, how can this be achieved?

Trying to detect changes in the current CKEditor content. The goal is to identify which element's content has been modified when a user writes multiple paragraphs. Not well-versed in JavaScript or jQuery, but managed to come up with this code after s ...

javascriptjqueryhtmlckeditor

Spread out a div across a container's width

Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached. Take a look at this fiddle for reference. The absol ...

htmlcss

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss

Are DIV elements really impossible to click using selenium Web Driver?

Can DIV elements be clicked using selenium Web Driver? For example, I'm having trouble clicking the delete button in Gmail. https://i.stack.imgur.com/zsyio.png I've been trying to locate the element using the XPATH = //div[@aria-label='De ...

htmlcssseleniumxpathselenium-webdriver

Align text to the left and right with a centered div

Visualize the asterisk * at the center of the div textAlignRight * text AlignLeft This is essentially my goal to accomplish <center> <span class="left_host">Right aligned</span> * <span class="righ ...

htmlcss

The jspdf function is not displaying any images in the PDF file

I am new to coding and encountered an issue when trying to download images in reactjs. After clicking the download button, I only receive a blank pdf file. https://i.stack.imgur.com/0XJcC.png The function in my react code that attempts to generate the p ...

javascripthtmlreactjsimage-processingjspdf

Solving the issue of IE7 div overflow-y: scroll causing content to be obscured by the scrollbar

I am facing an issue with a table inside a div (#body) that scrolls along the y-axis. Specifically, in Internet Explorer, the scrollbar is hiding part of the last table cell behind it, causing a shift in the layout of the table columns. This problem does n ...

cssinternet-explorergoogle-chromevertical-scrolling

Issue with host-context scss rules not appearing in final production version

I am facing an issue in my Angular project where the scss rules that define how components should look when within the context of another component are not being applied when I build for production and put it live. Here is an example: :host-context(my-tabl ...

cssangularsass

Can anyone provide guidance on how to create this particular shadow effect using CSS?

Is there a method to use CSS to create a green shadow in that particular shape? ...

cssshadows