So yeah, I'm working on coding a website, and I'm primarily using the font "Robot Condensed" ( http://www.google.com/webfonts/specimen/Roboto+Condensed )
Now the problem is I have a jQuery thing, where you hit the button and it expands to the full text. When you hit this though, the all of the font-weight: 300 texts on the page mess up, with no apparent way to return them to normal except by refreshing the page.
I don't believe the problem lies in the Javascript though, because I don't know of what in it could cause this, and also, it was doing this yesterday as well, before I implemented any Javascript (you would just scroll down the page and after a few seconds the font would mess up). I've only seen this issue in Firefox.
Normal
http://prntscr.com/t009m
Broken
http://prntscr.com/t005u
Normal
http://prntscr.com/t00fl
Broken
http://prntscr.com/t007z
It's like the font is becoming more thin or something. Has anyone ever experienced anything like this or might have any idea what's causing it?
Thanks.
EDIT: Okay, it seems to happen when I use any kind of jQuery on the page.
Related
So I've built a HTML page but I'm getting this weird bug where when I refresh the page, for a split second after refresh I can see the basic font, and afterwards it changes to the one I've applied from Google fonts.
I've checked my code a thousand times and I've no idea what's happening, this is the first time I'm seeing this. It is kinda annoying because it very visible and my elements even change positions a bit, because of the font/size.
Do you have any idea what could be causing this?
a quick search made me find this article: https://medium.com/clio-calliope/making-google-fonts-faster-aadf3c02a36d
you should download your fonts and host them yourself so it renders faster. having google host it for you only makes it slower to load (could be many factors why it takes long to load, maybe its your internet, maybe because there is a lot of text on the page, maybe both.) which causes you to see the regular font for a couple seconds.
On my website http://uus.diamedica.ee/et/tooted/veterinaaria/6 is having strange 1px graphical glitches in and around the red menu bar, that only occurs in MS edge. It's like small bits are bitten out of the menu ribbon, thus making it look uneven. I've tried changing fonts, backgrounds, margins, paddings, etc. And nothing seems to make it go away. I've tried different zoom levels, but still the same after refresh.
Funny thing is, if you hover the menu items, then some of the bugs go away. Is anyone else having similar problems in MS edge and knows what´s causing it? Image below.
additional screens
http://design.imago.ee/test/diamedica/screen1.png
http://design.imago.ee/test/diamedica/screen2.png
Somehow i was able to fix the problem (at least in the computer that it appeared in the first place) by giving .menu-ribbon position relative, z-index 2000 and bottom value -1px. The issue should be still available to see in the draft version for those who are interested, http://design.imago.ee/Diamedica/html/index3.html is the url, open it up and hit refresh once after you´ve first loaded the page. At least im still seeing it in the draft version.
I also try to make a test by normally visiting the site in Edge.
Site looks correctly without any issue.
Below is my testing result.
Let us know, If there is anything that we are missing.
We will again try to make a test to reproduce the issue.
Are you working with low memory or with so much load on Edge?
Try to close all other site and open your site and check whether you can produce the issue or not.
I work with responsive design and whenever I'm testing on androids my websites always look perfectly fine. However with iPhone's I notice there's a lot of default settings that mess with my coding big time. Border radius's coming up on inputs, certain text just blows up to big font's etc. I can never find where these are coming from using the inspect tool and since it's only on iPhone's I'm guessing it's default settings. I try to use "!important" for certain things but that never works. I was wondering if anyone else had these problems and know how to fix them? Am I missing a meta view?
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
I'm not even sure where to start on this one. in (some versions) of ff 3.6 (maybe others) my float-tastic page, doesn't render. At all: if you switch from another tab, the old page continues to show. if you reload, it will draw /some/ elements over the other page (really!). If you scroll, you get a page of ridiculous glitches and 5 to 30px high repeats.
Here is the offending page:
http://artdispenser.com/quarterrat/index2.php
It's set up as a long column with alternating floats to create a punk rock type look. The page is randomly generated, so feel free to reload it a few times.
Seems to work well on other browsers. Has anybody ever seen anything like this? any idea where to begin? I figure that this page is such an insane pile of fail that anybody who knows what is going on will immediately know the problem.
Thanks, folks!
For starters you have the same id used multiple times on the page. That is bad, very bad HTML. However that is not the problem.
Secondly, FF does have issues rendering monospace fonts. Which in your case would be Courier. Change that to Courier New and it will work again. But then you will have to resize the font accordingly.
I would highly recommend using web-safe fonts. A sample list of these fonts can be found on http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html or on http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.
And as #David Dorward mentioned, validate the page. That might have also picked your font rendering issue.
This part at the end doesn't look very encouraging:
</body>
</html>kes to move the world.You unlock this door with the key of imagination. Beyond it is another dimension: a dimension of sound, a dimension of sight, a dimension of mind. You're moving into a land of both shadow and substance, of things and ideas; you've just crossed over into the Twilight Zone.
</div>-->
</div>
</div>
</body>
</html>
It doesn't help that you never opened an html tag, even though you're closing it. Twice.