└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # technical_oddities 2 | 3 | A compilation of short descriptions of tech oddities, debunked or not 4 | 5 | ## Chrome - Adding many strings together causes a crash 6 | 7 | If you add a very large number of strings together in javascript, chrome will crash with a call stack error, but it will be very hard to find what part of the code (e.g. if this was in a larger project) generated this error because breakpoints near this error fail in DevTools 8 | 9 | Try running the following and opening it up in your browser 10 | 11 | (echo "")>err.html 12 | 13 | edit 2023: may not crash chrome anymore, even if increases to 1,000,000, but may have similar type of situation with many ternary https://twitter.com/cmdcolin/status/1640104370800066561 14 | 15 | ## Javascript - Maximum size of a HTML5 canvas element 16 | 17 | Many browsers have a maximum size of an HTML5 canvas element, typically with any one dimension limited to the max size of a 16 bit signed int http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element but considerably less when considering both dimensions 18 | 19 | A quite jarring consequence though is that creating a canvas larger than allowed limits does not throw an error from the creation or the drawing to it 20 | 21 | See also https://github.com/jhildenbiddle/canvas-size#test-results 22 | 23 | ## PhantomJS - The size of the default form elements don't scale with zoomFactor 24 | 25 | Using zoomFactor is a promising way to make a website render "retina" type screenshots from webpages, but using a higher zoomFactor will scale all web page elements except the size of checkboxes, radio elements, and other form elements. 26 | 27 | Source code a screenshot demonstrating issue here https://gist.github.com/cmdcolin/05a916eead041dd4288cd461b15b0197 28 | 29 | When you dig into it, it seems to come back to a WebKit core issues that are confusing to follow https://bugs.webkit.org/show_bug.cgi?id=51544 30 | 31 | update 2023: try in puppeteer...will report back 32 | 33 | ## SVG - large feature sizes are not drawn 34 | 35 | Example 36 | 37 | ``` 38 | 39 | 47 | 48 | 49 | ``` 50 | 51 | In Chrome 83 this is not visible on the screen, but ideally would be a 100px wide box 52 | 53 | ## Canvas - large clearRect does not clear region properly 54 | 55 | Similar to the above SVG issue, performing something similar, clearing a large region from offscreen areas, with clearRect also fails on canvas 56 | 57 | ``` 58 | // this fails and the red bar disappears 59 | const elt = document.getElementById("cnv"); // canvas with width=1000 height=10 60 | const ctx = elt.getContext("2d"); 61 | ctx.fillStyle = "#f00a"; 62 | ctx.fillRect(0, 0, 1000, 10, 10); 63 | ctx.clearRect(-94504.1, 0, 29790.800000000003, 7); 64 | 65 | // this works and the green bar does not disappear 66 | const elt2 = document.getElementById("cnv2"); // canvas with width=1000 height=100 67 | const ctx2 = elt2.getContext("2d"); 68 | ctx2.fillStyle = "#0f0a"; 69 | ctx2.fillRect(0, 0, 1000, 10, 10); 70 | ctx2.clearRect(-94504.1, 0, 29790.800000000003, 7); 71 | ``` 72 | 73 | See 74 | 75 | https://bugs.chromium.org/p/chromium/issues/detail?id=1131528#c_ts1602745683 76 | https://codesandbox.io/s/sleepy-fermi-lhy2f?file=/src/index.js 77 | 78 | ## Can only store 2^24 elements in Map or ~2^23 in regular JS object 79 | 80 | See https://searchvoidstar.tumblr.com/post/659634228574715904/an-amazing-error-message-if-you-put-more-than-2-24 81 | 82 | Only affects some platforms e.g. V8 83 | 84 | 85 | ### Chrome - The maximum string length is 512MB. If you use TextDecoder it returns silently if exceeded 86 | 87 | See https://cmdcolin.github.io/2021-10-30-spooky.html 88 | --------------------------------------------------------------------------------