The background of my site is black.
Every time the site reloads the browser's window blinks because the default setting of browser binary is "white background" in Chrome & Firefox.
Is there an alternative, but rebuild whole browser from sources?
Related questions:
Set page load to black instead of white background?
Flashing a White page
I'm already trying to use <body background="#000">. It doesn't help.
Is this an unresolvable problem?
Here is something you can try:
Check that your website allows browser to cache it's content so pages loads faster after viewed once
load resources (css, js, images) dynamically or bottom of body so the page is rendered faster (DOM)
use AJAX to change content when navigating inside your site
Related
I'm trying to apply my CSS-file to my webpage.
When I load my website, I shortly see the site rendered correctly (with my CSS-styles applied), while the page is still loaded. When the page finished loading some of the styles I defined with CSS dissappear, for example the background-color or the alignment of some texts. Sometimes when I reload the page the site is rendered normally without me changing the browser or the code. I allready tried deleting the browser cache but nothing changed. I use Google Chrome. I can see that the CSS-file must be loaded correctly, as some of the styles are applied, and the page reneders correctly while the loading processes.
This is an image of my site while loading:
This is an image of my site after loading:
Thanks for your help.
It seems like some other css or js file is loaded after your css file. please provide a link to your page or post the html.
If you use the development tools (F12) you could interspect the Network tab. here you can see whitch files are loaded and in witch order they are
I have an ASP.NET Core 3.1 site (using Asp.NET Zero) with Angular 10, in which one page has an iframe, which displays web pages from a subdomain (old VB.NET WebForms 4.0 site):
<iframe [src]="pageUrl | safeUrl" style="height: 100%;" frameBorder="0">
<p>Your browser does not support iframes</p>
</iframe>
The pageUrl variable is changed by clicking on items in a navigation bar in the Angular app.
This architecture works quite well the first 10-15 clicks. After that, each click on a navigation item downloads the requested page (Network tab shows HTTP 200 and the actual ASPX response) but the iframe does not draw the content. The whole iframe content stays white, although loaded.
There are a few symptoms that I think are important:
If I click and do not move the mouse, I see the web request fulfilled and the page stays white until I move the mouse and trigger a redraw of the menu item by the :hover event in the CSS. It can stay white for a minute if I don't move the mouse.
When the redraw happens, there is no activity in the Network tab and is definitely triggered by the mouse movement.
This "white page" effect happens even with ASPX pages that I have visited before and were displayed properly.
If somehow I move my mouse inside the iframe without triggering the redraw, I can see the mouse cursor changing when I go over a link or another element that has different cursor in the CSS.
There is nothing custom on my menu, CSS, or JS (Angular) for this behaviour.
Google did not help and pointed to "white-flash" effect, which I do not believe is what I have. So, any suggestions will be appreciated even they are not complete solutions. This issue is preventing me from going to production.
I have a page on my website in which I'm loading a purpose-built WIX marketing site inside a frame thusly:
<html><frameset cols='100%'><frame src='https://michael3557.wixsite.com/truckercert'></frameset></html>
On a pc/laptop, everything looks fine and as expected. But on a phone, the "mobile-friendliness" of the wix page is gone, and a super-narrow, unfriendly page displays.
Yet if you hit the wix link shown above directly (not inside a frame) on a phone's browser, it does look fine and mobile-friendly.
Why does my page lose its mobile-friendly nature just because it's loaded inside a frame? And how can I solve this?
The browser determines the viewport settings from the top-level document.
The frame HTML has no <meta> tag setting the viewport.
The page inside the frame is not the top-level document so its <meta> viewport data is ignored.
So I was watching this video about responsive design and something in that video is bothering me. At 2:59 he risizes the window to the large screen and then refreshes and then Safari downloads the banner_large.jpg and when he does the same thing with the medium and small screen sizes, then Safari downloads the banner_medium.jpg and banner_small.jpg respectively. But then one can see that he is able to resize the browser and the banners change accordingly (notice the 'jumps' of the image when the threshold reaches). So the question is that if Safari doesn't download the other two images then how is it able to display them? Am I missing something here?
He has the Network Requests section selected in the Web Inspector. This would only show you when the page sends a request to the server to get a file. He had already resized the page at the beginning of the video, which would have requested the files at that time (assuming they weren't cached from a previous time). So, assuming that caching is turned on, when he resizes the page with the inspector open, it won't request the files again.
In order to show the file sizes, he refreshes the page, which forces the browser to re-download all of the files and show them in the Web Inspector. You can tell he's doing this because when he first opens the Network Requests section, it's empty (because nothing is being requested). Following this, he says, "And then hit reload" and he reloads the page which shows all of the files on the page being downloaded. You can tell that they're all being re-downloaded because in the Cached column, it says No for all files and it's displaying the contents for index.html and other files that would have been cached, such as css files and the background gradient.
We're using the customer's default browser to display locally generated HTML files in a preview mode. The files are between 0.5M and 2.5M in size. These files do not progressively render in any of the top 5 Windows browsers (Chrome, FireFox, IE, Opera, and Safari). In other words, when we try to load these files, the browser window displays a blank white page until the page is fully loaded.
The HTML files we generate have no tables or script and have all CSS references in the head section of the HTML file. Our pages include about 10 unique 16x16 png images (with image height and width explicitly included on each img tag) that are referenced several hundred times. Our output validates 100% compliant with XHTML 1.0 Strict using the W3C validation service.
Any tips on how we can enable progressive rendering of LOCALLY loaded HTML files or is progressive rendering a feature that is disabled for locally loaded files?
As an alternative, I'm looking for any tips that would allow us to display a GIF busy indicator graphic while the rest of the file loads and is rendered. We tried doing this by placing a GIF image at the top of our HTML file (immediately following the open body tag) followed by a div with display:none styling that included the full content of the HTML we want rendered. Unfortunately, the GIF file does not display until the full HTML file is loaded.
Thank you,
Malcolm
I can suggest that you confirm that the content is being interpreted properly by the browser. Despite the W3C checks, things could still be handled in 'quirks mode' .. In my experience, 'xhtml-transitional' has proved to be the most likely to provide cross-browser zen. Also, confirm that major tags like 'div' and 'p' are being closed quickly. It's hard for the browser to know what to do if the whole page is always in one layer of 'div' ..
Good luck!
Tim