I have an angular material application which when viewed in IE (11) doesnt display the fonts correctly. In Firefox and Chrome I dont see any problem.
The fonts are not being fetched remotely, they are contained as resources within the application.
As an example I have a sidenav component that holds a menu which looks like this in Chrome\Firefox:
But in IE looks like this:
Inspecting the network traffic in IE I can see the font files are being successfully retrieved and I can open these just fine when copying the urls into a new browser tab.
Oddly when I run protractor tests against IE, the fonts are rendering fine, I wonder if selenium server\IEdriver are doing something differently that allow the fonts to display?
Anyone got any ideas what could be the problem here?
Thanks
Related
I am working on a Winforms project in .Net-7.0 and using WebView2 to display an HTML page available online.
The app works fine in the local system so I know there is no coding related problem but once installed on a VM, WebView2 does not show the HTML page.
I have opened the HTML page in the VM browser and it opens fine so the site is not blocked either in some way.
Any other things that I should check for?
(Skipping the code because it does not look like a code related problem to me.)
I'm working on a react app with create-react-app ejected (so that I can use css modules). It works perfectly in Chrome and nearly perfectly in Firefox (just need to make a few minor css adjustments), but in Safari, only the navbar is visible. Looking in the safari developer tools, http requests seem fine and there are no error messages. There are a few warnings about using Cloudinary images without http requests, but I get the same warnings in Chrome and the app still works fine in that browser.
Also, the images and elements that don't appear in the browser do appear in the elements section of the developer tools. The (now invisible) links even work. I thought maybe it was a z-index problem, so I set the background color to transparent, but the page is still blank. I'm not using the fetch API (per other suggestions on stackoverflow), and I tried adding -webkit- prefix to my css where applicable. In addition to css modules, I'm using styled-components.
Without error messages I really don't know where to start looking for a solution. Any ideas what could be causing this behaviour? I'm running the app on localhost and also Heroku, and am having the same problems with both methods.
Thanks!
Solution: apparently Safari deals with css positioning and z-index differently than Chrome and Firefox. I played with positioning (fixed, absolute, relative etc) so that everything appeared correctly on Safari, and the resulting arrangement also worked for Chrome and Firefox.
Edit: But there are still positioning problems in Microsoft Edge, so I'll have to make adjustments for that, too.
I have an EXTJS app and when I look at the source by using browser's inspect element I can see my entire app's source code (except for the server-side code ofcourse.).
I have seen some extjs apps that when inspecting theie source code, all I can see is the app.html page and non of their .js files is discover able by the browser.
I was wondering how I should configure my EXTJS app to make them not viewable inside the browsers "Sources" tab (ie. Chrome's Inspect Element > Sources).
Any help is much appreciated,
The best you can do is to obfuscate your code, as there is no way to stop someone looking at it once its got to the browser.
Even if the browser could hide it somehow, there is nothing stopping a user sniffing the packets on the network etc.
I am working on a Responsive Coming Soon page. It looks quite fine on several devices like iPad or iPhone, but to test them on multiple platform I am using Opera Mobile Emulator.
It is not detecting the Custom Font retrieved from Google Font API used in CSS. It's rather showing the fallback font come as default given within CSS. Problem is within emulator I can not see if the font has been loaded or not using the resources timeline.
Was testing the Emulator for Samsung Galazy Nexus.
What might be the reason behind this? Can anyone help? Thanks in advance.
From what I can tell from this page: http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/#typography Opera mini doesn't support custom fonts, specifically:
setting font-family will have no effect
In Gridfilters, if you are using a StringFilter field, then there is a property in StringFilter.js called :
icon: 'ux-gridfilter-text-icon',
Basically this loads a 'binocular' icon in beside the filter text box. This works fine with mozila, but with IE, the icon is not showing up.
Is this a known problem by any chance?
I am using the source at : http://ccinct.com/lab/filter-grid/
My ext js ver is 3.2.1
The girdfilters version seems to be v0.2.7 as per GridFilters.js
EDIT: This works in Chrome fine. Just IE is the problem
EDIT#2: Also , the other css properties like column headers etc are fine. it is with the loading of the image that there is a problem.
Thanks. it got solved.
I had taken the filters plugin (ux,resources) folders, and distributed the files in diff packages in my web application.
For some reason, that messed up things even though the references were all correct. When I started using the package as it was given, it got solved.
Not sure why though.