Firefox Refresh Glitch - javascript

On the contact portion of my website, I noticed that there is a visual glitch only with Firefox that causes the JSFiddle SVG (and possibly others as well underneath it) to be a full size at refresh. Even after cache it does this. It does not occur on any other browsers. Have any of you seen similar issues to this?
It appears to work well on all other browsers including Chrome, Opera, Edge, etc. My fix with all other browsers for any flashing at refresh was to create a second class for things called .hiddenOnLoad and gave it a CSS display: none;
However, it appears that Firefox does not want to follow this rule and display my SVG even when it is supposed to be hidden until requested to fade in.

You need to remove at least the <a> tag on the <head> section:
<a name="top"></a>
You can also find other unnecessary tags and errors in your markup with the help of the W3C Markup Validation Service, like this: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.christopherfrydryck.cf%2Fcontact.html

Related

"background-clip:text" has weird behaviour

I am using a page that is using the css of -webkit-background-clip:text with a polyfill to get it working in browsers that don't support this.
Obviously, some browsers use Webkit (Chrome, Opera & Safari) and some don't (Firefox, IE), and I want the page to display the same (give or take the background clip) however this isn't happening on Firefox. The polyfill I'm using works but translates the text very weirdly in Firefox. Strangely enough, IE works (though the polyfill doesn't).
This is Firefox:
This is a Webkit browser:
And finally this is IE:
The polyfill I'm using is https://github.com/TimPietrusky/background-clip-text-polyfill
I've tried contacting the guy who made it but can't get any reply out of him.
Basically, I have no idea why Firefox is translating the text at all. I want it to either act as Internet Explorer and just display the text as white, or correctly display it.
How would I go about doing that?
If you need a page to work off, there is too much for a jsfiddle, but a link to the page can be found here.
Your polyfill creates a SVG for Firefox, but doesn't seem to do a very good job at it. Removing
overflow: hidden from the SVG element (set in svg.css) will let all the generated SVG show.

Internet Explorer 9 appearance conflict

I have been researching all over the internet about this, and unfortunately cannot find out why this is happening. It seems to only be happening in internet explorer 9, on certain computers.
The entire page looks like a mess only in IE 9 (some computers):
The URL of the website is Here
Can anyone tell me why this is happening in IE9?
(NOTE: Compatibility view cleans it, but then the Js/jQuery doesn't work right).
For some reason, IE thought that the site was in my intranet, and rendered it in Compatibility Mode (there's a setting in IE to automatically render intranet sites in CM).
When I unchecked the box to "automatically detect intranet network", the site rendered correctly.
So your real question is how does IE determine the intranet network, and how can you force your page to NOT render in Compatibility Mode... something like this.
I noticed that you have blank space above your doctype. IE hates this. The doctype needs to be the very first thing in the file.
You also have over 2300 HTML validation errors that should be investigated and rectified. Again, IE is very sensitive to invalid HTML.
Going on a whim here, but I think it's the usage of inline-block. I don't have IE9 installed to a point where I can use it's developer console to further inspect, but IE is known to be very bad about displaying inline-block elements.
In Google Chrome's console, I am able to replicate the same appearance using float:left as opposed to display:inline-block, so that should solve that piece of the issue.
Edit: The only syntax issue I see with the HTML is the placement of the </head> tag, which is not adjacent to the <body> tag.
Edit 2: As far as the outlining issue goes, try using this answer to another question.
Edited yet again to fix the display of the tags.

IE8 doesn't show anything in div after jQuery append operation, even though the div has content (technically)?

I'm having a problem with IE, I can't seem to get the div to display contents in IE8 even though when I ask for the contents of the div back again, it appears to be populated. Works fine on Chrome, Safari, Firefox. Just not in IE.
http://jsfiddle.net/Vb6nK/
The dev site is here (so you can see what it would look like if the images were available): http://www.antarctic-design.co.uk/oboe/
Many thanks,
Eamonn
I think it is - bizarrely - your CSS.
Take out this line in the CSS
.information_block {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#eaeaea')";
}
The jsfiddle works for me when I remove that line
EDIT you can just remove the -ms- prefix, it's not needed for the filter to work in IE8

Unable to apply CSS in IE9

I have a website that uses OpenTable's reservation widget. In every browser except IE9 (including older versions of IE) I can style and manipulate the widget elements, both through a stylesheet and by using jQuery. But in IE9, the widget shows up with strange styling, and I can't effect it in any way. Even trying a simple test like $('#OT_form').hide(); has no effect whatsoever.
Here's a temporary link to the site:
http://www.tcmulder.com/jing/reservations
Anyone know what the problem might be?

How does IE work with contentless anchor tags?

I am trying to do a hover over effect on an image on a site that I am working on. I am having two problems with this. The first is browser specific and is my main worry.
Anchor tag problem:
When I view the site on Chrome, Safari and Firefox the tooltip (Jquery tools) works as expected. When viewed IE, the hover over is really strange. It seems as though the hover only is recognized when your mouse is over the outermost row of pixels (the border) on the anchor tag. The result is not being able to view the tool tip while in Internet Explorer. I have tried doing this in ways other than with Jquery tools, but even with the HTML event "onmouseover", the same effect happens.
I tried a few things while experimenting with this, and it seems that if I put something inside the anchor tag like some text, the text expands the hoverable area. This is interesting because this only happens in internet explorer.
For my environment, I am running on a 27" monitor with the latest Chrome, Firefox, Safari, and Internet Explorer 8 to test for compatibility.
Second z-index problem:
The second problem I am having is with the tooltip. It seems as though the tooltip, although styled with the highest z-index, goes behind an image of a school that I have infront of it. I figured that one of you might have a clue on what is going on with that, because I am stumped.
View the site
I put the site up and minimized it on jsfiddle.com. Here is the link to the project that I posted.
http://jsfiddle.net/keirp/B9Cgc/
Give your <a> some dimensions and/or display block or inline block. IE has trouble getting position for <a> when they are inline with nothing in them

Categories