lexyeevee
@lexyeevee
👻
👻
👻
👻

sometimes i just feel like making a completely ordinary post with nothing weird going on. no fake websites or browser sniffing or other hijinks, just some good old-fashioned prose. hope you have enjoyed reading it in a normal manner


lexyeevee
@lexyeevee

delighted to report that so far, no one has identified the crime taking place here


lexyeevee
@lexyeevee

congratulations @widr! the answer is that the ghosts generally do not appear when reading this post on your home timeline, but generally do appear when viewing it directly (although they don't for me, so, ymmv)

the reason is that the ghosts have css ending in

background: linear-gradient(; display: none;

and there seems to be a slight disparity in error handling between the code that renders posts server-side and the code that renders posts client-side:

  • the client-side code looks for semicolons rather aggressively and parses this as two separate properties; it then tries to parse the background property, fails, throws it out as invalid, and includes the leftover display: none;

  • the server-side code leaves the whole thing intact, and the browser parses this as a single background property with an unterminated linear-gradient containing a bunch of garbage, which is all discarded as invalid. so there is no display property and the ghosts are left visible

discovered via someone else's typo, which i immediately knew i had to use on purpose for something

my original version of this just changed the background of an element so i could see what happened where. if this paragraph has a gold background, i believe it was rendered client-side. if it has no background, it was rendered server-side. if it starts out with no background and then _changes_ to have a gold background, that is cohost fetching the post and re-rendering it, which is interesting because i've never edited it


You must log in to comment.

in reply to @lexyeevee's post:

in reply to @lexyeevee's post:

okay so you're...

using the spin animation, the keyframes for which are:

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

but you're also explicitly setting the transform to something else, the observed behavior (read: crime) being that the animation now runs between the identity transform (at 0% time) and whatever you've overridden it to (at 100% time)

and then you're getting the linear/sine/etc behaviors from the animation easing and direction attributes

edit: okay so is this just normal css crimes and the acutal crime is the linear-gradient weirdness that seems to show the ghosts just fine in the post page and on the first occurrence on the main feed but not on subsequent appearances in the main feed??? the fuck is that

Weird - on my home timeline, on the first page (ie, didn't hit the pagination buttons at all), the first occurence of the post (which is eevee's "nobody figured it out yet" repost) shows the ghosts for me.

Other instances of the post further down that same first page of the home timeline (my own repost of it, and the original post) do not show the ghosts.

I can tell that the display: none; is being respected when it's on the timeline, but it's not when I go to the post page...

I also notice there's this background: linear-gradient(; that appears out of nowhere immediately before display: none; when it's on the post page, which corrupts the display: none; part...

but what causes the background: linear-gradient(; to appear?

it looks like the malformed background: linear-gradient(; element is actually present in the post's CSS, but gets discarded by the javascript that renders posts dynamically on the home timeline. when viewing it directly the server actually serves the HTML of the post inline, preserving it in the final html and causing it to consume the display: none

hmm.... There has to be something that makes it stick when viewing it on the post page, though.

I just tried to do a test post with that in the div style, and it disappeared both in the timeline and in the post body, leaving display: none; working both times. Also tried copypasting the entirety of the style, too, and that didn't work either.

maybe there's some sort of sanitation that happens after the bit that would've fixed the linear-gradient thing??

EDIT: wait no I got it working, just as eevee posted how she did it :P

i really don't know; all i can tell is what i've gleaned from viewing the page source as-loaded (one provides the html already-rendered, and one puts at least some of the posts in string slugs to be rendered on demand)

i think it needs to be both on the timeline and far enough down from the top of the page to be delivered in the latter lazy fashion

in reply to @lexyeevee's post:

i'm in firefox 115.0.2 on linux and just get a hard display: none / no ghosts / always goes gold very briefly after reloading

additionally, the js console has a minified react 418 & 423 error. the funny react error decoder site tells me that's progression from "Hydration failed because the initial UI does not match what was rendered on the server." to "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering." which seems relevant. but i have no idea why i'm getting that error in firefox but not chrome

i'd blame it on ublock origin blocking simpleanalytics or whatever but i can reproduce this even in a completely fresh firefox profile, with tracking protection turned off and every network resource loading successfully, so.... i dunno

the original post where i saw this happen definitely showed the "ghosts" fairly reliably in firefox, but so far i haven't managed to get them in firefox on this post and i have no idea why. they do show in chrome (where i'm logged out), but not in a private browsing window in firefox. no idea what's up and the idea that this might be related to some react guts is terrifying

the ghosts don't appear unless i turn off violentmonkey and reload (firefox). i only have one userscript but disabling that userscript is not enough, i have to disable the whole extension