JR
Josef Rissling
Stories
Code
Sound
About

browser-quirks.jpg
Browser Quirks
When Stack Overflow couldn't help



browser-quirks.jpg
Browser Quirks
When Stack Overflow couldn't help
Sometimes you can't figure it out

There are moments as a developer in which you are desperate and it seems there is no help out there. Before I release (soon) an article about the development of this site, a small summary of the quirks I found during development. It is a mix of CSS, HTML and JavaScript errors and mistakes. Maybe, if I have time, I put them up on Stack Overflow.
Working on Desktop but not on Mobile


JS: Trailing commas can give mean errors. Try to avoid them.
setTimeout ( myCallback, 300, )
That is better:
setTimeout ( myCallback, 300 )

A big thank you to Mozilla there. The Wi-Fi debugging is pretty awesome and quite stable.
Transitions working only in Firefox


CSS: Works in FF(53) but not working in Chrome(58), IE/Edge(11), Opera(45).
.fader-element { transition: opacity 100ms, ease; }

Remove the comma before
ease
:
.fader-element { transition: opacity 100ms /*,*/ ease; }
RGB with floating point numbers only working in Firefox


JS/HTML: Works in FF(53) but not working in Chrome(58), IE/Edge(11), Opera(45).
var r = 10.3; var g = 193.2; var b = 14.3; var element = document. querySelector("#myElement"); element.style.color = "rgb("+r+","+g+","+b+")";

Use integers instead.
var r = Math.round( 10.3); var g = Math.round(193.2); var b = Math.round( 14.3); var element = document. querySelector("#myElement"); element.style.color = "rgb("+r+","+g+","+b+")";

IE/Edge not rendering SVG correctly


HTML/SVG: Behaves incorrectly in IE/Edge(11).
Add the attributes.
x
,
y
,
width
,
height
and the
viewbox
in the svg root element.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" xml:space="preserve" > <!-- svg content --> </svg>
IE/Edge problems with item in for in loops


JS: The usage of
item
in
for...in
gives strange results in IE/Edge(11).
var myObject={...}; for ( var item in myObject ) { // calls window.item() var myObjectItem = myObject[item]; }

Take another key, e.g.
it
:
var myObject={...}; for ( var it in myObject ) { var myObjectItem = myObject[it]; }
Array.sort() not working


JS: Don't sort things with a
bool
comparator like in C++.
var myArray= [ { value:3, id:"A"}, { value:2, id:"B"}, { value:5, id:"C"}, { value:1, id:"D"}, { value:3, id:"E"} ]; function comparator(a,b) { // Wrong! // Won't sort correctly var result = a.value > b.value; return result; } myArray.sort(comparator)

Use
-1
,
0
,
+1
as comparing result to get rid of wrongly sorted entries.
var myArray= [ { value:3, id:"A"}, { value:2, id:"B"}, { value:5, id:"C"}, { value:1, id:"D"}, { value:3, id:"E"} ]; function comparator(a,b) { // Good! var difference = a.value - b.value; var result = Math.sign( difference ); return result; } myArray.sort(comparator)
2017 Josef Rissling Contact Terms of Use Nutzungsbedingungen
This site uses cookies. Read more.
Stories
Code
Sound
About