Font Embedding is working strangely - html

I have a webpage which displays one label containing font as font-family:OCR A Extended. This page contain nested web page which can be navigated through forward and backward button. Suppose the total nested page is 20, in this case till 15 the font is coming fine as expected after that for rest of the pages it is getting changed to default font of the page i.e. Times New Roman.
Also this is not happening frequently, its happening once in 100 times but as the issue is unavoidable so looking for the possible fix for this.
I searched and went through this URL also https://msdn.microsoft.com/en-us/library/ms533034(v=vs.85).aspx but with no success.
Please help me and bear if the question is too vague.

Related

Page has a weird font glitch on refresh

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.

Content disappears or appears randomly Chrome

Strange bug I fixed once in the past but did not write it down/document it/report it so now I'm lost in the same workframe.
So, it's an Angular 2 app, the content is hardcoded html, no Angular binded variables, data banding or similar.
The bug show up on Chrome, not on Firefox.
If I refresh 10 times in a row, the content will show up sometimes and won't others, there is no pattern or clues about it.
Once the content is hidden, if i change whatever element property, will show up all the content instantly.
I have attached a gif which explains the bug clearly.
Thanks for any idea/suggestion/help :)
EDIT 1:
I just added 2 pictures of the css computed, one with Bootstrap 4 and other without the framework, same result.
Not related at all to Angular or any stuff like that.
I am importing a font from the GoogleFonts page. If I download this font, I get TTF format, which is having a bug on Chrome and does not work properly, but if I link to their server, it's using WOFF2 format.
See this picture attached which it shows the different formats for the same font.

Jump to a specific entry not working for several browser

i was working with Screen and some Qwebkit based browser. I do thumbnails of specific entrys of a webpage via Achnor. That worked fine till some days.
The issue is that a lot of webbrowsers (including my crawler) aren't able to Jump to a specific Anchor of a post entry. This issue occours only on this specific Website by Blizzard Entertainment.
I took a look into the webpage several times with firebug but i can't see the reason for the Bug. I hope that someone is able to tell me whats wrong with it.
http://eu.battle.net/hearthstone/de/forum/topic/14899382319?page=4#69

images not appearing in canvas on chrome in iOS7

I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.

Chrome displaying dom elements in strange order, then fixed on refresh

This must be a content problem, but so far I haven't found it - and it is new, it just started happening on a production site.
Using Chrome Version 31.0.1650.57 m, I can replicate this pretty regularly, and so far, not in any other browser.
the problem is on load, some dom elements are appearing out of order. That is, the dom has div1, div2, table1, div3, table2, etc., but the rendered web page shows table 2 above div1. There is not, as far as I can tell, any css that is causing it to be positioned strangely, and simply refreshing the page makes it render correctly. There are not errors in the console.
One caveat - the html is the output of a conglomerate of software and developers, and is not the best dom structure to begin with. But again, it is fine in all other browsers (so far), and it was fine in Chrome until recently.
Below are two screenshots* - the source, and the rendered output. Note that in the source, the H3 tag with the words "Items In Your Shopping Cart Below" appears above the highlighted element (the table containing the checkout button). But in the rendered html, you can see that the button is above the H3. Again, if I refresh the page, it fixes itself.
I am still troubleshooting this, will keep trying to find the problem, but hoping someone out there might have some idea what could be going on. I suspect it is to do with the carousel of images at the top, but that's been in use, unchanged, for a long time now, so not sure what's changed.
Shoot, I don't have the right creds to post images in my question! Here are links to the images:
https://www.dropbox.com/s/v4prpoinmc83f00/Chrome%20Cart%20Bug%20Source.png
and
https://www.dropbox.com/s/j092l7e1etebz07/Chrome%20Cart%20Bug%20Rendered.png
You can also (probably) reproduce this yourself. Got to www.storkie.com, and add something to your cart. No, I'm not trying to lure you into shopping there - just that's how to get to the problem. Anyway, it may come up fine on first add, but then, if you click the View Cart link at the top, it probably will come up as in the pictures.
Thanks in advance for any suggestions!
I have the same issue on a JSF Primefaces application and I couldn't find any unescaped characters.
The element order on my page changes every third or fourth reload, BUT I have an ajax poll (refresh) every 15 seconds and when this hits the page renders correctly.
I compared the source code before and after this ajax refresh, but there were no differences.
I know this is no solution, but maybe helps to get closer to one.
Edit:
I found an issue in chromium issue tracker regarding this problem.
https://code.google.com/p/chromium/issues/detail?id=322936&q=order&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
In any case, the issue should be fixed in next chrome version.
Just wanted to say that I have the exact same problem. A site that was last updated six months ago has recently started rendering elements out of order in Chrome.
For me it happens 2 out of 3 times I visit the page and it's as if rendering restarts when it hits a specific tag.
My code look kinda like this:
List
<span class="HistoryLink_Separator"> » </span>
<span class="HistoryLink_Last>Item</span>
Chrome renders the page fine until it hits the SPAN with the » (right double angle quotes) then it starts positioning elements at the very top of the page again.