Work Text:
Don't panic.
NB, Fri 12 Jun 2026: Somewhere between ~06:00 and ~12:00 CDT on Mon 08 Jun 2026, AO3 updated some stuff that broke a lot of things in a lot of people's CSS-works (and at least one userscript). As a result, there are a few things not doing what they used to do in some of my works. So I decided to I fix that... and I did (fix it, that is); I dug through OTW's GitHub repo last night, found what they changed (for which there's surely a good reason, I just can't imagine what — it could be something else that was broken sitewide and the update required killing overflow, or some new feature/function was an either/or and the new thing won-out, or it could be a strategic exploit prevention, but these are only categorical guesses, not specifics, nor anything but spitballed example potentiæ on my part), and fixed the overflow problem and consequentially the sticky problem. For site skin or Stylus, use:
#work-skin.wrapper {
overflow-y: visible !important;
}
or for those who prefer a Tampermonkey or Violentmonkey userscript, just grab my AO3: return overflow-y visibility userscript on Greasy Fork, or copy the pasta below:
// ==UserScript==
// @name AO3: return overflow-y visibility
// @namespace https://greasyfork.org/en/users/1555174-charles-rockafellor
// @version 0.2
// @description 08 Jun 2026, AO3 changed the rendered DOM and `overflow` function in that new tree. This script returns `overflow-y` to `visible` to permit old works' magic to work their shenanigans.
// @icon https://i.pinimg.com/474x/5c/93/49/5c93497c0a8bebf0214fe4389f53658b.jpg
// @match *://archiveofourown.org/works/*
// @match *://archiveofourown.org/chapters/*
// @match *://archiveofourown.gay/works/*
// @match *://archiveofourown.gay/chapters/*
// @match *://archive.transformativeworks.org/works/*
// @match *://archive.transformativeworks.org/chapters/*
// @match *://insecure.archiveofourown.org/works/*
// @match *://insecure.archiveofourown.org/chapters/*
// @grant GM_addStyle
// @license MIT; https://opensource.org/license/mit
// @downloadURL https://greasyfork.org/en/scripts/582339-ao3-return-overflow-y-visibility
// @updateURL https://greasyfork.org/en/scripts/582339-ao3-return-overflow-y-visibility
// @author Charles Rockafellor
// @homepageURL https://archiveofourown.org/users/Charles_Rockafellor/collections
// ==/UserScript==
'use strict';
GM_addStyle("#work-skin.wrapper { overflow-y: visible !important; }");
In order to test it out, you can check
-
̶̢̡̢̨̨̢̛͓̖͈̥̯̗͉̣͍̤̱̟͚͓̠̱̤̻̝͈̗͉̰͚̣͉̜̻̙͉̜͕̪̠̪̺̹̦̦̞̼̥͈̭̜̘͍̥̪̯̘̳͚̦̩̭͉̬̲̝̲̹̥̞̯͕̠̥̯̖͙͔̺̹̹̠̪͎̰̬̗̣̹̼̞̘̦̲̠̻͎͈͙̀̎̋́̆͒̽̃̀̊͊̿̅̄́̈́̇̆̾̔͂̿̏͛́̽͆̄͒̀͗̐̂́̉̀͗͑̀͋̌͐̓̿͒̈̑̉͒̔͂̄̇̅̍͛̃̑̏͊̾͐̈̽̊̄̐͒̋̃̆́́̆́̇̈͐̈́̑͐̑̅͌͗̈́̓͘̚̕͘͜͝͠͠͠͠͠ Foolproof, and just teh fool to prove it! (April Fools' Day gag-piece); if the curtain of blackness doesn't cover the entire page (not just the whole work: the whole PAGE) a moment after you get there (grr: before the update and this fix to bring it back, the curtain was there as the first thing that you saw), then something's gone wrong
- maybe you need to click the site skin's “Use” button or turn on the Stylus style or manager's userscript,
- maybe toggle-on Stylus or enable your userscript manager,
- maybe disable and re-enable your userscript manager (basically the userscript manager equivalent of refreshing one's browser),
- maybe even export/back up your scripts and reinstall your manager (I had that happen yesterday, actually)...
- or maybe AO3 has updated something again and I need to fix my fix, who knows?
- and Inside, Outside, Upside-down (CSS-fun demo), which has a number of... “interesting ” effects, but specifically some that either block stuff, cover the whole page (ch. 2 isn't simply as it appears), or continue beneath the footer (see the very bottom of ch. 6 especially, for this last — not a little below the footer, but all the way down instead, Underneath it all as No Doubt ft. Lady Saw [2001] might put it).
Same mechanics in each work, different visuals and purposes.
NB: mystyrust's do you believe in coincidences? was affected, and probably many others, but 10 hours after I released this userscript, she said that she had found a CSS workaround to fix her work's overflow-y / position: sticky breakage (using position: revert;).
Mewsmodeus (Mewzebub) opted to re-work her I'M NOT AN FANFIC AUTHOR PLEASE DON'T CURSE ME, so it's not quite the same result now as it had been, but you don't need my userscript for it either (and you can always see it in all of its earlier glory in Wayback, per the link in her work's recent chapter 7 of 05 Jul 2026).
I'm not sure if it would fix mackerel_cheese's way-cool Íkaros sticky image's CSS in when the wax melts, but right now you can see the beautiful work as a whole but not the stickied image falling with your scroll unless you run this userscript or find some other client-side workaround.
For some applications (such as mysty's, obviously), you can fix the issue with the position: revert; workaround, and feindcode (feind) found #workskin { position: static } to work for something as well (that alone was a mix for me, permitting the curtain to occur once more, but still within the work's boundaries, and didn't cause my sticky popup to follow the scroll) — important to know, if any of your works were broken by that change. For others (such as my works linked in the div above), these were no dice for my stuff's configuration.
If you do CSS magic, then those two fixes (or maybe some other CSS) might fix your work, or you might need to re-work a replacement, or hope that your readers (or you, as a reader) will user this userscript (or anything else that will do the same), or pray that AO3 returns overflow-y someday (though I imagine that it was likely nuked for security purposes, and if so, then returning that function seems a bit unlikely any time soon).
If you're a reader, then maybe your favorite CSS authors will be able to fix their heavies with those workarounds (or something else that works for their configurations' needs), but my userscript here is all that I know of [so far] to fix things client-side (at your end, to change how the works are rendered by your browser).
And so, to paraphrase feind, here's my bill (everything is simple in hindsight):
CSS 2 kudos
Knowing where to put it 998 kudos
O ~~~ O