掲示板 Forums - Reload stuck

Might be related to Michael recently pushing updates to the front-end. Is it still like that? Maybe clearing your browser's cache would help?

That bar is meant to appear at the bottom right when you gain EXP. Slides up, gains EXP, slides down (bottom -50px). It shouldn't move around randomly. If it breaks, I'd expect it to just stay up and persist (stay there through loading different part of the platform). If it's the animation (tweening) that's breaking it would pop in and out, instead of animating smoothly.

Besides that, I guess you just have to wait for Michael to help.

Update: While not exactly the same, I did get one similar loading bug after a quiz when I tried starting the next one (from the "quiz/finish" page). Looked like some sort of async response that never resolved. Didn't find anything interesting looking through the console/logs, and I can't replicated it.

Hmm... what browser are you using? Safari? Have you tried clearing the browser cache? If it's Safari, it's harder to clear just the cache. It also doesn't have developer tools enabled by default. If you have access to those you can check a few things. If you know how to run JS from the console you can run "popupXP(10,50,10);" to manually test that bar.

Is it just the bar, or also the laoding problem?

Since Michael seems to have missed your post, it might be worth reposting in the "Bugs / Problems" section https://eu.renshuu.org/forums...

It's just better visibility of him.

Right, so basically you just need to get to the console ( https://stackoverflow.com/ques... ), and see how the bar behaves when you just call the JavaScript (JS) function. I've never used Safari, but if you can have the console (dev window) open next to the main Renshuu window, you can just run this " popupXP(10,50,10); " (without the "") a few times and see what happens.

Should slide in from the bottom and then slide out smoothly. Like here (don't mind the colours, It's my skin):

By the way, you don't actually gain EXP, it's just a visual test 😁

Edit: Looks like the bar is missing a few of the CSS styles for you. The border, background, doesn't show the level either. Can you confirm that it is the bottom EXP bar? Looks like it is, but just to make sure.

Sounds like Safari's viewport math being weird. Let me just quckly explain how that bar works:

In RED: That's the full bar, with your level, background, text, everything. popupXP(10,50,10); is just one part of the function that performs the EXP gain and animation (Michael gave it to me for testing). It's normally 'visible', but should always be hidden below the viewport.

Once the full function runs, it also adds an inline style to that element, setting 'bottom' to -50px. This element (for me) behaves normaly with the bottom prperty. So if I set it manually to 'bottom: 0;' it sticks to the bottom (bottom-right in this case).

In YELLOW: This is the parent container of the bar (without the 'Lv. X' text and the BG), it's position property is set to 'static', so any 'bottom' change doesn't do anything, and it might not 'anchor' its chidren properly. This shouldn't matter on Chromium-based browsers.

In TEAL: This is basically the main parent container of the two parts that make up the bar ('curr' is the darker blue, 'new' the lighter blue, or EXP you're about to gain)

If you manually set 'bottom=0;' (like I have here) it doesn't stick to the bottom of the viewport. It's offset by 20-30px from what would be the 'global' bottom of the viewport.

This might have something to do with your problem. On Chromium-based browsers making the window 'taller' likely won't have an effect on that bar. It should remain below the viewport.

Basically what you're seeing is that element (TEAL), even though it should always be waiting offscreen (at the bottom).

One more thing you can try: find this element (TEAL), edit HTML, and change/add the inline 'style' ( style="bottom: 0;", like I have in the screenshot ) to see where your browser thinks 'bottom 0' is for that element. You can move it higher or lower with a differnet value: 50px, -100px, etc.

.progress-u35 recently got two new styles added, which was my suggestion for fixing a subpixel overflow problem, they really shouldn't (and don't seem to) cause any problems, but just in case you can find them and temporarily disable them:

• transform: translateZ(0px);
• overflow: hidden;

Disabling them doens't change anything for me, and Michael said they were fine. Having said that, if it worked fine for you and it only strted breaking 1-2 days ago, it could be related. Some sort of Safari quirk I don't know about. It could also be OS zoom or something, not sure.

Fixing it on your end might be diffiuclt. Your best bet is to wait for Michael to get to you.

(If this is too technical... I'm sorry )

PS: I made two skins for the CSS contest, I'm using the second one: https://eu.renshuu.org/forums...

If you have any requests or want to participate, drop by :)

TLDR: Problem seems to be how Safari is positioning the bar when idle, not during the XP animation.

UPDATE: Wait... so running the function 'fixes' it until the page reloads? Can you try adding style="bottom: -50px;" to RED (adven_growth) manually? That's what the function adds when it finishes running. If it 'fixes' it without running the JS, it's related to that.

It's ok, I was being way too technical. You can't run HTML like that in the console.

Safari is kinda weird about how it interprets "bottom" and "top" in some cases...

Run this instead: document.getElementById("adven_growth").style.bottom = "200px"; <- change it to "0px" or "-50px" (anything you want), just check to see where it thinks 0 is.

For this one 0 should always be the bottom right corner of your visible screen

To test just that white bar, you can run document.querySelector(".progress-u35").style.bottom = "0px"; <- you can also change it to "0" or "-50px", just check to see where it thinks 0 is.

For this one 0 should be below the visible screen (it's offset a bit).

After that (reload the page first) run:

There isn't a space here "# adve", it just thinks I'm linking to the dictionary if I don't add it.

$("# adven_growth").css("position", "fixed"); <- it should already have this, but just in case.
$("# adven_growth").css("bottom", "-50px"); <- Edit: should already be there too...

And then try to see how it behaves. Check what popupXP does, and check what resizing the window does (when the bar is visible). It should be staying in place (in the corner) and dynamically keeping up with whatever the window looks like.

To explain it a bit, all this function does is it animates the bar to 15px from the bottom and then puts it back down to -50px. You shouldn't be able to see the bar, and it shouldn't matter what your window looks like (size/zoom, whatever).

If Safari is treating 'bottom' relative to the document and not the viewport, that would explain what you're seeing.

You're just testing to see how it behaves. Keep in mind that any of these changes get reset when you reload the page.

How big of an issue is it for you? Ideally, it's something that should get fixed on Renshuu's end.

PS: Everything looks perfectly fine on my end, I have no idea what Safari is doing...

What's your Safari version? You can check with navigator.userAgent in the console. I think older versions are more likely to have these problems. I'm not super familiar with Safari and Mac though.

Hi!

Let me jump in as I have been seeing this glitch for quite some time. Cannot name any particular timeframe when it began, though.

So, after some checks, I can indeed say that it looks like the issue with positioning, as it is being done based on the viewport and not the actual page height.

Some quick note on it - if I open this topic without any message reference (i.e. https://app.renshuu.org/forums... ), then I will have the white XP bar right after I scroll a little (roughly for 50px). If I open a page that is referencing some specific comment (i.e. https://app.renshuu.org/forums... ), then I will get the XP bar under the message I opened at. If I am at the bottom of the page and do disable/enable the bottom style, the bar moves from where ever it was on the page to under the end of the page, as it should, I guess. Not sure if it is intended to be visible all the time, though.

I managed to fix it using the following rule added to the styles of adven_growth:

will-change: transform, bottom;

Ok I took a bit of help with chatgpt
after running
"const el = document.getElementById("adven_growth");
el.style.position = "fixed";
el.style.bottom = "0px"; // Stick to bottom
el.style.right = "0px"; // Stick to right
el.style.zIndex = "9999"; // Stay on top of other content
el.style.display = "block";
el.style.background = "lime"; // Make it easy to spot
el.style.willChange = "transform, bottom";


popupXP(10, 50, 10);"

I dont think it appears anymore now...no wait it appears
renshuu on other tab doesn't have this if I first run the command

Yup as expected if I dont run it it appears on every page unless I interact with something else.

Now just to make it permanent..how do we do this?

Yeah there is the style sheet. Thank you so much!! It works now ..

You are welcome :) Great, that it helped!