hrbrmstr's Daily Drop

Drop #701 (2025-08-28): Thursday Morning Grab Bag

hrbrmstr

To Infinity…But Not Beyond!; Digital Steganography Meets Prompt Injection; Yamanotes

A nerd-snipe, a clever prompt injection, and a pleasant diversion await ye, today!

TL;DR

(This is an LLM/GPT-generated summary of today’s Drop using SmolLM3-3B-8bit via MLX and a custom prompt.)

It’s back to doing the right thing, and even gave me my extra newlines today. Gotta love non-deterministic computing.

To Infinity…But Not Beyond!

CSS has come quite a long way since December 17, 1996 (CSS level 1 publication date). It introduced basic features for text styling, font properties, margins, padding, color and background styling, and the “box” model. And, that’s about it. Despite these limitations, countless designers managed to make some pretty specific creations with it.

In 2012, the CSS level 3 candidate publication was released and it contained a magical function: calc(). As one might infer from the name, it’s a math function that allows basic arithmetic to be performed on numerical values, using addition (+), subtraction (-), multiplication (*), division (/), and parentheses. It’s super powerful!

Let’s say we want the margin box of each section to take up ¼ of the space. calc() makes quick work of this:

section {
  font-family: sans-serif;
  float: left;
  padding: 1rem;
  margin: 1em; border: solid 1px;
  width: calc(100% / 4 - 2 * 1em - 2 * 1px);
}

(The second row uses ⅓ instead of ¼.)

As one might further expect, it has all sorts of maths functions to help with calculations, and it does automatic unit conversion. It even supports some cool maths numeric constants like e and pi. It also has support for “degenerate” constants (special numeric values that aren’t technically “normal” numbers but still act as numeric values in calculations) like infinity, -infinity, and NaN.

Eric Meyer has been exploring and experimenting with infinity for a few weeks. The first experiment was due to getting nerd sniped on Mastodon, causing him to try out:

<style>
div {
    width: calc(infinity * 1px);  
    height: calc(infinity * 1px);
    margin: 0;
    padding: 0; 
}
</style>
<body>
  <div>I'm YUGE!</div>
</body>

(Well, he used “huge”)

Oddly enough, if you check out the numbers in his post, I get the same WebKit values in Safari Technology Preview (it reported the width as 33554428px) but in Arc (which is Chrome Canary under the hood) I get a completely different value 1.67772e+07px. Thankfully, I am not as bothered by this disparity as Eric was with the Firefox wonkiness he goes on to explore in the first post since it gets a strange computed value of ~17.9M but renders at half that.

He also tried some experiments with font size, and notes Safari caps the value at 100,000px, Chrome at 10,000px, while Firefox computes a massive floating-point number but actually renders text at ~2,400px. The below is how the text looks in Arc with the font-size set like Eric did (Safari Technology Preview did have a painfully swipe-scrolling vertical scrollbar but did not show any rendered text).

(Definitely read the comments in his first post!)

His second post experiments with:

  • other text properties (text-indent, word-spacing, letter-spacing)
  • z-index with infinity
  • (painfully slow) animation-duration
  • and, division by infinity

They’re both worth a read, and I do hope you copy, test, and expand on the examples, say by exploring:

Container Queries & Units

  • calc(infinity * 1cqw) – What happens when container query units go infinite?
  • Deeply nested containers with percentage-based sizing
  • Container queries with circular dependencies

CSS Grid

  • grid-template-columns: repeat(calc(infinity), 1fr)
  • Massive grid-area spans like 1 / 1 / calc(infinity) / calc(infinity)
  • Grid with calc(infinity * 1px) gap values

Custom Properties (CSS Variables)

  • Circular custom property references that could create infinite loops
  • --size: calc(var(--size) * 2) type scenarios
  • Extremely long custom property names or values

Modern Length Units

  • calc(infinity * 1dvh) (dynamic viewport units)
  • calc(infinity * 1lh) (line-height units)
  • calc(infinity * 1rlh) (root line-height)

CSS Nesting

  • How deep can you nest selectors before browsers give up?
  • Infinite-seeming nesting with :has() selectors

Scroll-Driven Animations

  • animation-timeline: scroll() with infinite scroll distances
  • Timeline ranges with massive values

CSS Functions

  • clamp() with infinite min/max values
  • min() and max() with dozens of infinite values
  • Deeply nested calc() expressions

Cascade Layers

  • How many @layer declarations can you stack?
  • Layers with extremely long names

CSS Transforms in 3D

  • translateZ(calc(infinity * 1px)) – disappear into the z-dimension
  • Infinite rotation values
  • perspective with infinite values

across multiple browsers (some of those are also super fun and few have surprising results).

Digital Steganography Meets Prompt Injection

The The Trail of Bits gang continues to deliver some exquisite findings in the “AI” space, this time taking a look at “[Weaponizing Image Scaling Against Production AI Systems] (https://blog.trailofbits.com/2025/08/21/weaponizing-image-scaling-against-production-ai-systems/)”.

As I discovered when I wrote my Chrome alt-text extension most vision models resize large images to standardized dimensions. Combing through some online docs, the popular ones do so differently.

OpenAI uses a two-step resizing process:

  1. First resize: Images are scaled to fit within a 2048 x 2048 square, maintaining aspect ratio
  2. Second resize: Then scaled so the shortest side is 768px long
  3. Detail modes:
    • “low” detail: Single 512×512 tile (65 tokens)
    • “high” detail (default): Processed as multiple 768×768 tiles

Claude uses a simpler approach:

  • Size limit: 8000x8000px maximum (2000x2000px if >20 images in request)
  • Automatic scaling: If image’s long edge >1568 pixels, it’s scaled down preserving aspect ratio
  • Token calculation: tokens = (width × height) / 750
  • Performance note: Resizing adds latency without improving model performance

I hate Google and never touch their “AI” garbage, so y’all are on your own for Gemini specs.

The key vulnerability from the ToB research is that these downscaling algorithms create predictable mathematical relationships that can be exploited – attackers can craft high-resolution images where specific pixels become “high-importance” during the interpolation process, causing hidden text to emerge only after scaling.

As usual, their blog is well-crafted and very accessible, so go and read the details and try compromising a few friends (with their permission, of course)!

Yamanotes

This one’s quick and mostly included to counter the first two content-heavy sections.

Yamanotes (GH) is “music box of train station melodies from the JR Yamanote Line”.

Specifically, they are the departure melodies of each station on the counter-clockwise loop.

Just keep scrolling and tapping if you want to brighten your mood, today.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

  • 🐘 Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
  • 🦋 Bluesky via https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy

☮️

, , , , , ,

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.