Ask coding questions

← Back to all posts
Annotations are offset on some devices?

I have repl recently (well, maybe not recently but within the last handful of months or so) added annotations. They are great and all, but whenever I read them I find that the annotations box is shifted 56 pixels to the left, leading it partially offscreen.

This may seem weird, but if I were to inspect the box with devtools, it is purposefully shifted 56px to the left with a CSS transform!

The weird thing is that when I go to another computer this is not a problem. In fact, it is on the other side of the editor (next to the webpage preview). Why is this happening, is it a media screen size query gone wrong? About the media query though, I don't see any actual CSS media queries, maybe it's JavaScript screen measuring that is triggering this?

Also I noticed u constantly trigger debugger when u start writing annotations. You must be trying to debug it too ;>

Why could this be happening?

Thanks in advance

- A confused bacon strip.


I did some searching in the repl source files, and it looks like they deliberately added it. I think it's still a "glitch" though, as it is unintentionally offsetting my annotation alerts. If you format the replEnvironment.js in devtools on chrome it's around the line 37,000 mark.

An easier way is to just search for translateX(-56px) in the file. Either way, it's in replEnvironment.js.


This is a problem for one of my students now. How to fix?


@BramMoreinis1 I think it's a screen dimension thing, but I can't be for sure.


@Baconman321 All my students have the same laptops ... so hard to see how it would be screen dimensions. I just had him use Inspector to remove the code that had been injected into the HTML element style that added that offset other people had noticed.

(Paradoxically, the student's sweatshirt said "Onset" on it. Opposite of "Offset". Hmmmmm)


@BramMoreinis1 Hmmm, navigate to chrome://version, and find the version (it should be first on the page, see picture below).

I'm not sure if it has anything to do with version, but I'm just curious to see if it might be.

I got a different computer from last year and it is fixed now, but I also updated the software recently so it might be that, but I doubt it (still though, one can have a hunch).

It might just be how the student's laptop is set up and/or how the replit workstation is laid out.

I'd have to ask the replit devs themselves as they probably know how the translation is determined.


@Baconman321 Maybe the version of Chrome IS old on this student's laptop. I'll check that. Good thought!


that's probably a bug. Try refreshing, or enabling your settings. if not, i can report to bugs, for you.


@RYANTADIPARTHI Enabling my settings of what?

It's coded into!

I checked their source code and it shows a translation of -56px on the X axis, so I bet it just fires at the wrong screen size or something, or they mixed it up. I can't find the column that they wrote it in because the file is so big a search in devtools freezes the window up, sooo... :/


@Baconman321 so bugs then. Want me to report?



Tell them it's in their script tho, otherwise they might think it's a problem on my side.

It's a negative (the x axis transform), and I think it should be a positive (prob a simple coding mistake or smthing).


@Baconman321 ok, np.


Hello confused bacon strip, do have a userstyle or something enabled


@retronbv As far as I know, no.


I don’t know how to help you then, it’s just a replit problem @Baconman321