Skip to content
Sign upLog in
← Back to Community
Annotations are offset on some devices?
Profile icon
Baconman321

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.

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!

It's shifted purposefully wth???!

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 repl.it 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.

Edit:

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.

Voters
Profile icon
Baconman321
Comments
hotnewtop
Profile icon
BramMoreinis1

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

Profile icon
Baconman321

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

Profile icon
BramMoreinis1

@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)

Profile icon
Baconman321

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

Where to find version

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.

Profile icon
BramMoreinis3

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

Profile icon
RYANTADIPARTHI

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

Profile icon
Baconman321

@RYANTADIPARTHI
Enabling my settings of what?

It's coded into repl.it!

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... :/

Profile icon
RYANTADIPARTHI

@Baconman321
so bugs then. Want me to report?

Profile icon
Baconman321

@RYANTADIPARTHI
Sure.

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).

Profile icon
RYANTADIPARTHI

@Baconman321
ok, np.

Profile icon
retronbv

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

Profile icon
Baconman321

@retronbv
As far as I know, no.

Profile icon
retronbv

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

@Baconman321