I'm building a webpage with a bunch of images that are all coming from Rackspace Cloudfiles on their Limelight CDN. Occasionally the page will finish loading, including the images, and Chrome/Webkit will fail to render some images at all.
Chrome doesn't render a "broken image" in their place, and if I check the Resources tab in the Inspector, they are listed and the data is all loaded up. The non-rendered images show the same info as the properly rendered ones.
This usually occurs when I go forward a page and then go back (via history). It persists if I reload the page, unless I do a hard refresh (⌘⇧R in Chrome), then they all show up like normal again.
I'm not loading the images in JavaScript or anything strange like that, nor do I have any CSS that hides the images. This only happens in Chrome, and it doesn't happen in Incognito mode from what I can tell.
Any ideas what's causing this? If it's a bug, how do I go about reporting it to the Chrome team?
Update
I checked the headers in the Network tab of the Inspector and it turns out that for the images that are rendered, Chrome is only showing it's header metadata, like this:
And for the images that don't render properly, the metadata is shown along with the full request and response headers with a 304 Not Modified status.
This is still happening. On multiple computers, on several websites. There's a thread about this happening over the Google support forums as well.
This might be a Chrome/Webkit bug:
http://code.google.com/p/chromium/issues/detail?id=20960
This was a Chrome bug that has since been resolved. It is not the bug linked to by thatmarvin.
I had the same problem with thumbs images using the latest chrome. Images were rendering time to time. I changed image style:
width: 150px; height: 100%;
to
width: 150px; height: auto;
And "height: auto" has fixed bug in Chrome.
Hope the founded solution will help in some cases.
Related
I've got a problem using embedded pdfs inside websites with chrome (other browsers work as expected). Content, which is overlayed (like a lightbox) is disabled because the embedded pds overlays this content. Visually everything is correct, but code like hover, events, ... are not working.
I made a codepen https://s.codepen.io/stenet/debug/vzvxdq/mWkoNxYZZoGA to demonstrate the issue.
Here you can see the expected result: https://drive.google.com/file/d/18xXvIgEIzDPg1q99jfwif-nO28pC54SG/view?usp=sharing
Here you can see the wrong result: https://drive.google.com/file/d/1kYWmGxRwKvSLNSL9Tk5ZmfyJsF97jifz/view?usp=sharing
As it just happens on some computers (same version of chrome installed!) I really don't know why this problem occurs. As far as I know chrome has its own pdf viewer.
Any help would be highly appreciated!
Best regards, Stefan
I'm trying to get a job as a developer. I've made a personal website to show employers but I've got a bug. Everything is fine in all browsers except Chrome.
On the first load of the page, the navbar layout is messed up. After you hit refresh or navigate to other pages the proper layout is maintained.
I have no idea what is causing this. Can anyone help?
Link to website: www.alexanderisgr8.com
Possibly a caching issue due to an older css. Try doing a hard-refresh [ctrl+f5]?
I am trying to load background image to a page using Dreamweaver. It shows in IE and Edge but not Chrome or Mozilla. I have tried moving the photo's location (file path) and tried in both straight HTML and CSS with the same result. I cannot find another way to write the code or think of one (being very new to this) so that it will show in all browsers. This is the CSS code:
background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')
set in the body brackets;
and html:
<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">
Everywhere I look I find examples with ellipsis points, like url(...website.com/greanleaf.jpg) and the dots totally confuse me. I think perhaps I need help with how file paths work.
This is due to the implementation of the body and html tags in Firefox and Chrome browsers. the body and HTML tags are only as big as the HTML content of them. where as Edge and IE the HTML and Body are auto sized to the size of the view port.
Add this to your CSS
body, html{
min-height:100%;
min-width:100%;
}
Ok , so if your code is correct and the image it's shown in IE and edge try to
refresh your browser but not normally with this command : Control + Shift + R
so that you're sure to be running the latest and greatest version of what that web
site's serving.
First, you'll need to be sure that the browser is correctly locating the image.
A good way to be sure is looking at Chrome's network tab. Hit F12 in Chrome to reveal Developer Tools. Click the Network tab and then refresh the browser. You will receive a list of resources that have/have not loaded. If your image is listed in red, then it failed to load. Your problem will be an incorrect path.
This is a good resource for understanding relative file paths.
https://css-tricks.com/quick-reminder-about-file-paths/
However, if it did load successfully, the image isn't showing for another reason. Without seeing all of your code, I can only make a guess. Is the container that your image is in empty? Without content or a specified height, the background image won't show in some browsers.
I have an iframe embedded deep within a webpage, this iframe is intended for displaying various SSRS reports. It used to work in ie9 and ie10 (still seem to work in ie8 and ie11), however some "upgrade" between version 9.0.5 and 9.0.43 broke displaying SSRS in iframes. What happens is that the report gets a very narrow width rather than using the entire area, so all reports gets clipped. Reports work fine in a tab by itself, it is just iframes that seem to be broken. If "Page Width" zoom is selected it does show everything, but it tries to cram it into the same very narrow space, making the text too small and unreadable. How can I get the same behavior as before (as ie8 and ie11) where it utilizes the entire width for the report instead of clipping the report? 100% width is specified on the iframe, however it does not seem to be pushed down. The top parameter seem okey, it is the report section. The zoom select button is not shown on ie11, not sure if that is related or not. Seems like regardless of what parameters I enter, they are all ignored. Tried this
rs:Format=HTML4.0&rv:ToolBarItemsDisplayMode=143&rv:DocMapAreaWidth=1500&rs:Command=Render
and it does not have any effect on output nor toolbar.
I have read about this issue elsewhere, however all "solutions" seem to be to revert the entire webpage back ie8 compatibility mode, that is just not an option that is feasible for me due to the complexity of the web application.
The iframe I use looks like this
<iframe src='http://Host/ReportServer_SQLSERVER2008R2/Pages/ReportViewer.aspx?%2fBase%2fPeakRate&rs:Command=Render' style='width: 100%; height: 100%'/>
After many trial and errors and scouring through obscure websites describing internet explorer quirkiness etc. I found that using an
<object data="xx"/>
tag instead of
<iframe src="xx"/>
seemed to solve the problem. Also Compatibility View had to be turned on. Apparently ie9 does not handle iframes the way that other browsers does.
The website I'm developing suddenly stopped working properly. The images on my Homepage appear sliced and in weird places (however when inspecting source and hovering over certain elements, the highlighted content seems to be in the right place), some hover on effects don't work and some text doesn't render.
Everything works properly in all other browsers except for Google Chrome. I cannot think of any other thing I've updated in the source code than executing svginjection plugin.
I uploaded my backed up files that used to work before, but the problem still occurs. It doesn't show up on every single computer, just on some (and I've checked it on multiple machines, both - Mac and Windows).
Just to clarify, I did clear the cache, I did check in the Incognito mode, I did restart my computer. None of these helped. I'm also 80% sure that problem only occurs on computers, on which this website was previously opened (the pattern I noticed after making around 10 tests at work).
Thanks for any help
Aight, so after going through all my files, trying to disable multiple options, etc... Everything is fixed now. If you do have similar problem, go through your css files and disable all webkit powered transforms and transitions, cause apparently enough is enough and if you have too many, Chrome just won't handle it. I managed to still reuse some of them, so... Must have caused some glitch in the matrix and that's why it all got messed up. For weirdly positioned images check z-index of parent container.