Today we went online with www.polypod.net and we're having the problem that, when the font has loaded, the screen gets completely white for a while (1-2 seconds) and then the website is drawn. Loading fonts is always an issue so we have the opacity of the page on 0 till we really have the font loaded and then make a smooth fade in.
What worked during production is now broken and we're kind of stuck why that is.
We don't have this behavior when we comment out the monotype font.
Does anyone have experience with this problem?
Thanks in advance!
Thomas
I was running into a problem called 'FOUT' short for 'Flash of unstyled texts'. Gotta love the internet for it's acronyms making it nearly impossible to find common problems. -.-
Here is a link to prevent this from the font provider we used
http://www.fonts.com/support/faq/fout
After all this there were still some occurrences of a white screen. A loaded script sets the html to visibility: none; so I changed the visibility of html to visibility: visible !important;.
Related
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
I have a personal live site at http://brunomoreira.net based on the great Touchfolio theme (http://dimsemenov.com/themes/touchfolio/) for Wordpress.
Since I don't know LESS, I've changed it to use a regular style.css stylesheet.
Everything looks fine except when viewing the "Projects List" (http://brunomoreira.net/projects-list/) section on a iPhone. The masonry blocks appear slightly padded to the right and that makes them not appear 100% visible on the iPhone screen (and it lets me swipe to the right, which shouldn't be possible).
I believe it may be a problem with margins or padding in the CSS or in the masonry code itself, but can't figure it out.
Any help appreciated,
thanks.
Bruno
On the mobile version you should remove the padding from:
#primary { padding: 0!important; }
While wanting modalPopupExtender to show from code-behind, everything works well except
the opacity and alpha(filter) properties of the CSS are not applied meaning i get a modal popup with the color i set in my BackgroundCSSClass and hence cannot see my original controls in the background.
anyone facing this weird behavior and have a solution for this?
B.t.w, Everything works well when the TargetControlID is not hidden.
I battled this same issue for most of the day today. I have 3 pages with this identical code in them. two of the pages worked as expected, with transparent background, one did not. In that one, the background was always 100% opaque.
Finally, I realised i had accidentally deleted the < !DOCTYPE html > line in that page. Adding that one line back into the page fixed the problem instantly. Simple. and a little unexpected. HTH
Got an issue I've been trying to solve without much luck for a while across various projects.
I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.
Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.
Has anyone experienced this issue?
I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.
So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
you can use display:table-cell and vertical-align:middle for the div containing the text
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.