AJAX loaded HTML content - Font looks weird - html

I've got a page which, when a button is clicked, shows a div, loads HTML trough AJAX and then puts the response into the div.
While everything is working fine, I noticed that in Internet Explorer, the font looks weird.
This is only in IE, Chrome for example has no issues displaying it properly
What could cause something like this?
Update: I've tried it with our terminal server, which also has IE8 installed, and there doesn't seem to be that problem.

Related

HTML page link odd behaviour

I have a simple website containing 3 HTML pages but sometimes internal links on IOS Safari doesn't work correctly. Rather than rendering the page, it displays the 'Open in "Drive" screen with options to save page as a document. When I refresh the page it renders correctly again. This usually when I navigate around the pages quickly and I am not sure why this odd behavior and how to fix.
See a screenshot here https://ibb.co/bXxzZTS
Not sure if it is related but the DNS is via CloudFlare (Free) and the pages are really fast (as it's just HTML, CSS and JS).
I have only seen happen on iPhone Safari. Other devices I have checked on include iPad, MacBook, PC running browsers Chrome or Safari are all OK.
Additionally, I tried using URL with and without full domain with the same result.
I just expect the page to render as an HTML page.

Div gets hidden on IOS, but not in Android

I have a funny issue that I have spent hours on. It looks like it has something to do with IOS Webkit since it only happens on IOS (Firefox, Chrome), but never on Android or Windows (also Firefox, Chrome). Because it only happens on a mobile phone it is difficult to debug.
I have a very specific div that does not render, but only sometimes. I have not been able to pin point when it renders and when not ... but I can change dom elements outside of it and then sometimes it works. This is a single page application and the dom gets manipulated via javascipt.
The divs above it works fine
I have attached an image of the div in question from my windows chrome machine.

CSS error on Safari, it works on Chrome

I am trying to make a website and was looking at this template (http://www.uipasta.com/wordpress-preview/rolling/).
I really liked the "testimonials" part and was trying that on my code.
However, I realized that "testimonials" part works totally fine on Chrome with any browser size, but not on Safari.
All the elements of testimonials get overlapped on Safari when I first open it up... It's funny because if I shrink or enlarge the browser and keep doing it like that, the elements stop overlapping and work perfect like on Chrome.
I tried to modify some stuff in css files and tried to find a bug.
But, all the attempts failed in vain... Can someone help me out with this?
LOL I can't even upload more than 2 links yet, because i don't have enough reputation... Here is how it looks on Safari, https://i.stack.imgur.com/kza7d.jpg
but yeah that's how it looks on Safari when it should be clean carousel moving objects.

Putting a focus on a iframe specifically in ie

I have an iframe popping up for a payment portal on my website. When they get to this page I want the iframe to be in focus so they can just swipe their card like directed.
I have tried several different ways to focus on the iframe, but nothing seems to be working in ie.
$('iframe').get(0).contentWindow.focus();
$('iframe').focus();
$('iframe').get(0).contentWindow.document.body.focus();
$('iframe').focus(); works fine in chrome and firefox, but not at all in ie.
Any ideas? Something I'm missing?

CSS Rendering Issue in Chrome / Firefox

I was trying to design this site:
http://bylc.org/summit2012/
When I was working offline in my pc everything was alright. But when I uploaded it in the server, the problems started to show up.
When I try to load the file for the first time everything seems to load correctly but after reloading the page the carousal stops working and the right part (side bar) of the page gets down and renders some text in different color and font. Also there becomes a little space between the carousal and the side bar.
I've tried everything in my knowledge. tried X-UA-Compatible, stopped all javascript in the page. But nothing did work. :( Could anyone please check and help.
Disabling scripts altogether caused the errors to occur on initial load as well as on subsequent loads, which leads me to believe it has something to do with the order of things loading in your page.
I suggest moving your script declarations from the head to just before your closing body tag to ensure they load as quickly as possible.