100%

The issue & showcase

✓ Published0🌍 Public

Last edited Sep 9, 2012

Created on Feb 11, 2012

This example demonstrates how MooTools’ getComputedSize() method mishandles non-integer pixel dimensions, causing layout elements to overflow or disappear when a user zooms the browser. Three test cases show progressively larger compensation gaps between two floating divs, revealing accumulated rounding errors from internal toInt() calls. The page renders HTML divs and reports measured values in a live JavaScript report, directly comparing pixel-perfect layouts against zoom-level artifacts. It uses MooTools Core 1.4.4 and standard DOM APIs for size computation and display.

AI-generated description

The issue & showcase

...

Test #1

...

Test #2

...

Test #3

Similar vizzes

Loading thumbnail…

mootools Request leak test

This example demonstrates a memory leak in MooTools' Request class by repeatedly fetching a large JSON file and rendering a world map as a GeoJSON FeatureCollection. The page uses MooTools 1.3.0's `Request` and `setTimeout` to continuously re-request `index.json` every second, with each response containing complex polygon coordinates. The visualization shows how the browser's memory consumption grows over time as the request-response cycle remains active, illustrating the degradation experienced during long-running sessions with large payloads.

GGerHobbelt

58% match

Loading thumbnail…

Invisible dots

Fifty identical black rounded squares fill a browser window, each rendered as a plain `<div>` with no visible content, creating a uniform grid of "invisible dots" against the white page. The example uses a simple `for` loop in vanilla JavaScript to append each element to the document body, with CSS flexbox controlling the wrap layout. The code intentionally corrupts the loop syntax with malformed `i < 50` conditions, revealing an authoring error that prevents execution. No external libraries or data sources are used; the visualization relies solely on raw DOM manipulation and static styling.

Ggragors123@gmail.com

56% match

Loading thumbnail…

Gist de30f3fbfcf277da051e

This example demonstrates a text-balancing technique that adjusts the spacing of words within a paragraph to create a visually even, block-like layout. It shows how justified text can be manipulated so that each line fills the container width more uniformly, improving the appearance of dense typographic blocks. The code relies on the jQuery library and a custom `smartresize` event handler to recalculate text wrapping on window resize. It also implements a debouncing function to limit the frequency of resize-triggered updates, ensuring smooth performance during interactive adjustments. The underlying logic inspects the element’s computed text-align property to conditionally apply justification, while preserving the original DOM structure through careful tag and span manipulation.

CCindyJonesHulfachor

55% match

Loading thumbnail…

locale semi-agnostic string to float conversion [JavaScript]

This example demonstrates a JavaScript utility for converting strings to floating-point numbers, designed to be locale semi-agnostic. It shows how the function handles various numeric formats, including European decimal commas, thousands separators, and ambiguous cases like “1.000” or “2,999.95”, returning numeric values or `NaN` for invalid inputs. The code uses the `toLocaleString()` method to detect the current locale’s decimal and thousands separators, then applies heuristic rules to interpret strings based on separator placement and digit counts. A MooTools click handler triggers the conversion examples, logging results to the console, with an accompanying HTML page featuring a product price display.

GGerHobbelt

55% match

Loading thumbnail…

Fullsize.js Prototype

This prototype demonstrates a minimal reusable utility for creating full-screen D3 visualizations that respond to browser resize events. The `fullsize` function appends a fixed-position div, adds an SVG child, and on every resize extracts the div’s dimensions to update the SVG’s width and height attributes, then calls a user-supplied render function. The example renders two diagonal lines forming an X, with coordinates recomputed from the current width and height, using D3 v4’s data join and merge pattern.

CCurran Kelleher

55% match

Loading thumbnail…

CSSOM/SVG Test

This example tests how WebKit handles SVG bounding-box measurements by comparing three different API results for a single rectangle. It uses a plain SVG `rect` element with percentage-based dimensions inside an HTML page, then displays the reported sizes from `getBBox()`, `getBoundingClientRect()`, and `getClientRects()[0]` as text rows. The expected dimensions are computed from the viewport and shown alongside, making it easy to spot discrepancies between the SVG specification and CSSOM implementations. The code directly manipulates the DOM with `createElementNS` and relies on native browser geometry methods, with no external libraries.

Mmbostock

55% match

Loading thumbnail…

Gist 81582

This example demonstrates a code snippet from a Merb global helper function that dynamically scales image dimensions while maintaining an 18-pixel vertical baseline. The function `scaled_image_tag` adjusts an image’s width to a maximum value and proportionally recalculates its height, rounding down to the nearest multiple of 18 to preserve grid alignment. It uses the Ruby `image_tag` helper from the Merb framework’s view layer, relying on standard hash options to pass width and height parameters. The code illustrates a practical rendering approach for responsive image handling in server-side templates, with no client-side visualization or data source involved.

DDylanFM

54% match

Loading thumbnail…

Wibbly-wobbly behavior in Chrome (Blink)

A continuously resizing SVG `<image>` element and a yellow rectangle reveal a rendering discrepancy in Chrome’s Blink engine: despite `preserveAspectRatio="xMinYMin"` on both the image and its referenced SVG, the graphic stretches while the rectangle stays fixed. Using d3.v4, the code animates both elements’ widths from 128 to 192 pixels over ten seconds via `transition.attr`. The effect intensifies with browser zoom, highlighting a bug where Blink ignores the image’s aspect-ratio constraint when loading external SVG files.

HHerst

54% match