Chrome 81, FF 75 (latest for today)
in Chrome native image lazy loading works inside iframe only. why? in FF works good
page1.htm(lazy loading does not work in Chrome but works good in FF):
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<img src="https://wallpaperplay.com/walls/full/5/e/a/218959.jpg" loading="lazy">
page2.htm(lazy loading via iframe works both in Chrome and in FF):
<iframe src="page1.htm">
is it Chrome's bug? in FF it works good
(you can check image deferred loading via scrolling and Developers tools -> Network)
I've got the same issue but only when the image is close enough to the viewport. Otherwise it is being loaded lazily.
Please try to open this minimal working example in Chrome and slowly scroll the page down. The image will be loaded when the viewport is approximately in the middle of the page.
<html>
<head>
<style>
.dummy {
height: 700vh;
}
</style>
</head>
<body>
<div class="dummy"></div>
<img src="https://yasminfinch.com/wp-content/uploads/2015/03/Hello-icon-300x212.jpg" loading="lazy">
</body>
</html>
Without confidence, I can suggest it is a feature, not a bug. Some kind of optimization. It reduces the chance to see the image is loading when, for example, user scrolls up/down quickly enough.
In my case, I had to explicitly set width attribute either inline or in CSS file.
In fact, you can try the original demo. Lazy loading on Chrome will not work if you remove the width and height attributes in this demo.
Related
My Wordpress post tries to show an image with HTML code like this:
<a target="_blank" href="https://www.facebook.com/15925638948/posts/10152127553183949" hidefocus="true" style="outline: none;">
<img title="CBS Moving Forward With ‘How I Met Your Dad’" alt="" src="http://ia.media-imdb.com/images/M/MV5BMTA5MzAzNTcyNjZeQTJeQWpwZ15BbWU3MDUyMzE1MTk#._V1._SY317_.jpg" width="620" align="">
</a>
However, the image cannot be displayed. Chrome & Safari shows a white box with a small image in the middle (the case that the image cannot be displayed). Firefox shows nothing for the image part but a blank line.
If I remove this line
width="620"
the image displays.
What's the rule about this width and the actual image width? It seems working fine for most cases but not for smaller images? How do I dynamically change the width to best fit my design?
It actually works fine for me (in all browsers). My guess would be that since no height was specified, the browser was interpreting it as 0. This explains the way in which Firefox was rendering the image, but not the others. There is also the possibility that some other code (from the theme, a plugin, or elsewhere) is interfering.
Well one thing you may not know is the % function usable in HTML for many things.
for example using this code:
...
width:50%;
...
would allow the width of the child object to be 50% of that of the parent object.
I think my problem is related to this question
Image getting 403 forbidden when deployed to server
It's not about the width, sorry for the misleading.
I have to show an exterior page in the iframe. The iframe's width is relatively small (about 400px) and cannot be changed. The problem is that when I scroll the iframe horizontally I can see the background of the contained page is not drawn. But some pages are rendered normally.
The code to reproduce is very simple:
<iframe src="http://ubuntu.com"></iframe>
<iframe src="http://britannica.com"></iframe>
<iframe src="http://linktiger.com"></iframe>
<iframe src="http://youtown.com"></iframe>
<iframe src="http://pagefreezer.com"></iframe> <!-- ok -->
<iframe src="http://imdb.com"></iframe> <!-- ok -->
A picture is worth a thousand words: http://jsfiddle.net/rKfNA/3/
The background of these pages is specified using the ordinary background css property.
I've reproduced this in the all major browsers under ubuntu, android and windows.
Why the iframe is not showing them right? Is this a rendering engines' bug? Or is this 'by design'?
And what can I do to show content in the iframes right?
Could you help please?
The background is set on the body. The body is the height en width of the iframe.
It is a bug made by the developers of the site. You can put an iframe in a div. The iframe exactly needs to be the width and height of the site you are showing. There is no other way.
Example: http://jsfiddle.net/rKfNA/4/ (the widths and heights of the iframes are not the width and height of the site inside it, so there are double scrollbars)
I currently have a PDF embedded in my website:
<body onload="startTime()">
<div id="resume">
<embed src="files/Resume.pdf" height="1250" width="975">
</div>
<h2 id="resumeNote">*Resume current as of 8/21/12</h2>
</body>
But I noticed that the sizing is not relative (it does not resize when the browser is resized). Most of the time it isn't an issue, but it looks a bit tacky when resizing. Is there any way to fix this? From what I've been able to find thus far it looks as if there is no option other than setting the PDF to display at a fixed height/width.
I have a page I am designing that is purely html with a css stylesheet.
I have it set up with scrollable content with a header and footer somewhat like this example here: http://www.cssplay.co.uk/layouts/basics2.html
except my header and footer consist of multiple images as opposed to text.
The issue I am having is that when I scroll down the page a little and resize the window to a smaller size, my header and footer disappear... but only in Firefox.
When I maximize the window again, the footer appears but some 300-400-odd pixels too high and the header is still gone.
Safari, Opera and Chrome all work fine; I can resize the browser window however much I want and my page reacts appropriately.
What could be causing this?
The weird thing is that if I don't scroll at all, and then proceed to resize the window, Firefox retains my page's styling...
possibly an overflow:scroll issue?
thanks everyone
sorry, i forgot to include my link:
http://www.theskycaptain.com/THESKYCAPTAIN.COM/projects/cosmicwomb.html
(I realize that the bandcamp player isn't behaving properly and my codes a bit messy, but I'm in the midst of developing, I've just hosted it to sort out this issue: simply scroll down a bit, resize the window and then maximize and you will see what I mean)
Your webpage has an improperly defined img and br tags everywhere including other errors that need to be cleaned up.
Incorrect Example:
<img src="../image/topspace.png"></img>
Correct Example:
<img src="../image/topspace.png" alt="image" />
For more info on img tags, read here.
Also, change:
</br>
To:
<br />
Try giving top and bottom values to your absolutely positioned elements.
i.e.
.topspace, .headercon, .scroller { top: 0px; }
.footer { bottom: 0px; }
( These are not necessarily the exact values you'd want, but simply an example )
I am transitioning a page that used to have frames to an iframe approach to be compatible moving forward. The basic look is very simple, it's a fixed pixel height header, and then the variable height content taking up the rest of the screen space with a different page in it.
I have accomplished this via:
<style type="text/css">
* {overflow:hidden}
div#header {position:absolute;top:0px;left:0px;right:0px;height:86px;overflow:hidden;margin:0px;padding:0px;}
div#wrapper {position:absolute;top:86px;left:0px;right:0px;bottom:0px;overflow-y:auto;margin:0px;padding:0px;}
</style>
and
<div id="header">
content in top
</div>
<div id="wrapper">
<iframe src="http://someotherwebpage" style="width:100%;height:100%;" />
</div>
While this works perfectly in Chrome and IE, it fails in FF and others (i.e. iPhone). Any ideas how I can further improve this to work on all browsers?
Edit: To be specific, by "fail" I mean the scroll bar does not show up (vertical scroll bar), and thus I cannot scroll up or down in FF/others. In Chrome/IE, it shows up and works as expected.
Try changing * {overflow:hidden} to * {overflow:auto}