Occasionally while a page is loading, it appears as though there is some sort of rendering error, where the page just smears the font that it is currently rendering.
I cannot actively reproduce this with code, and it happens all throughout the site.
I'd like to provide you with code or a URL to reproduce this, however, due to my NDA with this client I cannot.
Here is a screenshot:
Has anyone seen this and would you happen to know what might be causing it?
After tooling around for awhile, I discovered that the problem lied with too many "scrollTo"s on the site. Causing this type of blurring.
Weird? Yes.
Related
Hello StackOverflow 😀​
I'm having a strange problem with a react app when switching tabs in chrome (the app is already loaded). example : (Link to video if the gif is too low quality)
You can see there is a small white flash before it shows the site itself (something like 0.2 sec), the thing is my app is a little heavier I guess and it's sometimes 0.5-0.75 sec of white screen flash like that which is annoying customers.
Some of them describe it: 'the web page being blank for a 0.5 sec every time we go to another tab in the web browser and we get back to your app.'
I have seen some sites that have the same issue, for example, instacart.com, some of them have 0.1-sec white flash, and some of them have longer flash.
My question is how can I improve this? and what is related to this?
Most of the questions here are related to some stuff that is in react-native, but my app is react web.
I have read about FOUC but I'm not really sure if it's the issue.
btw I don't think it's related to the power of the computer (I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram).
Thanks for help.
Also, this problem seems to only exist in chrome, in firefox it doesn't have any white flash. I guess it's related to this (see the first answer). How can I improve it?
The reason may vary. There are several ways to assess and solve performance issue(or flickering issue) with your web app.
Here's what comes to my mind:
Environment check before troubleshooting an web app
I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram
The machine spec only holds some portion of performance assessment. It may or may not matter. because,
OS can slow down the performance due to its update issue. what OS are you using?
Web browser can cause the slowness as well. what internet browser are you using? and what version of browser is it? are you using any specific plugin or extension that may cause trouble?
So when assessing or QAing an web app, it is necessary to describe every little detail. When I was developing a Vue web app back in 2019 in a startup, there actually have been some real performance issues in production deployed environment that are bound to specific version of browser; not just that, one time I had a chrome extension causing a crash for my web app as well. Always make the reproducible environment clear unless it is exact which code section is causing the problem.
Once made the details clear, try to reproduce the problem. Does it reproduce in different browser, different machine, different OS? if not, environment is clearly not an issue.
Finding Problem with (any) Web App
If these little details are not causing the problem, it's time to get metrics inside browser.
I had no choice but to skip the environment assessment because the setting isn't clear in the question. But please do not skip that part; it is crucial. The problem might be fixable in current environment but it can remain in different environment.
Somebody already mentioned React devtool profiling in comment but I also recommend these tools:
Chrome Performance Tab
Chrome Lighthouse(previously Chrome Audit Tab)
Please try run a performance check with these tools first.
I've run a performance recording from Chrome Performance Tab and limited the scope to the flashing moment - and a slight moment afterwards.
(screenshots inside red lines are indicating white screen flashing moment)
Most Probable Reasons at the Moment
according to Chrome Performance Tab + Lighthouse audit, these problems are existing in that flashing moment.
treeshaking/code splitting is not used properly: whopping 40000 lines of code in a one file!(content.js) it should served in smaller chunks, so that the codes not important at first rendering must be loaded only when needed. check your code splitting setting first.
lighthouse also highlighted unused codes in a big chunk of single file are the biggest reason for performance dragging in your site before FCP(First Contentful Paint).
too many third party scripts: every third party code is casually lying around in the page with <script /> tag, without any performance tweaks. there are far too many third party libs running. they are not blocking the main thread as they are in async mode, but loading too many of them in parallel is definitely slowing the app. try load third party libs only when needed by inserting them dynamically.
this is most probable reason to my eyes but we need to dive deeper before drawing any conclusions.
Is it possible that this is related to Hardware Acceleration? I usually turn this off in my browsers, and I do not experience what you're explaining on the site you provided (I'm running Chrome on a Macbook Pro 2020 13" intel).
Perhaps turning Hardware Acceleration off will fix the issue?
You said that the issue only appears in Chrome, do you have any extensions that could affect the page when switching tabs? I'm thinking any extensions that reads or edits the page in any form or way.
I guess you have already tried this, but if not: could re-installing chrome and testing the sites with a fresh install (no extensions, no profile logged in...) work?
So in the end the solution was pretty crazy, we had a picture with the logo of our company in the navbar (which is appearing on each page of the app).
The problem with the picture was - whopping 35,000 px width and 5,000 px height.
You couldn't see it because it was inside a div with a fixed height and width.
The way I found that - opened dev tools, and started to delete the divs.
for example, we have:
<div id="root">
<div>1</div>
<div>2</div>
</div>
So I delete div 1, then check if the problem is still there. if the problem is still there I go delete div 2. And continue like that till you find something crazy like a 32,000px picture.
Very 'old school' but it is what it is (:
I was profiling my app for performance, when I started to notice something strange. A 'mousemove' event was firing and calling code I hadn't added myself. Heck, I don't have a mousemove listener on my page. I thought it might be an extension, maybe AdBlock, so I disabled all of my extensions. It didn't go away.
Also, upon opening a <select> list, I noticed it calling some class 'ListPicker'... Seriously, no clue where this is coming from. Some screenshots:
Also notice the "Compile Script"... I'm not eval-ing any script on my page by default. What gives? Looking for the source, DevTools simply says this:
Can I somehow still make DevTools redirect me to the exact lines of code it was executing? It is frustrating to see strange, alien code executed on one's page and not even being able to look at the source code.
More on the mousemove events it was firing:
Upon inspecting the sources tab, I found nothing but my own files.
In addition, I noticed that always somewhere towards the end of my profiling session, this "unattributed" source would appear to be completely blocking my JavaScript:
HOWEVER, this is not even what happens. My site stays completely responsive - it wouldn't do that with 100% scripting CPU usage. However DevTools says otherwise. The last thing that really gave me nightmares was this:
NEGATIVE SCRIPTING TIME? You can even see Chrome's rendering giving up towards the left of that pie chart.
So, in all my confusion, what exactly could this be? How do I find the source of this, or does it even have one, maybe this is just a bug within the newest version of Chrome? Really appreciate if anyone could drop their thoughts.
I'm facing an issue since few days. When users land to our website they are automatically scrolled down at the bottom of the page.
I just can't provide the website I'm really sorry.
There is no anchor in the URI, no such things related to scroll.
When I was reproducing the behaviour I disabled the JavaScript to eliminate this track. Even with no JS the behaviour is the same.
Almost of our users use Firefox as web browser. I figured out that issue is constantly happening on Firefox instead of Chrome which is happening randomly.
Do you have any idea what could cause that behaviour, event when the JS is disabled ?
If anyone has faced this issue and can be helpful to dig with us do not hesitate !
Thanks again
Last night, I was trying to debug a particular bit of vanilla JavaScript on a private page.
After a half an hour or so, the browser crashed while in the middle of stepping through a troublesome section.
When FireFox restarted, FireBug insisted that there was no JavaScript on the page - does anyone have any ideas what is causing this? Clearly the JS was (nearly) valid before the crash, and wasn't changed before I restarted. The only thing I can see, is that FireBug probably installed an update at that point?
I've tried cutting out all of my code, but nothing seems to make a difference. Other pages, even on the same intranet site, still work, but this one doesn't list any files under the "Script" drop down.
I've compared with the built-in Dev tools, and they also show no JavaScript loaded. The JS is a form submission handler, and clearly it is no longer running when the form is submitted.
I struggled with this for much of today. Eventually resolved it by creating a new profile.
I would be very interested in learning of the root cause if anyone figures it out.
I am working on a site: http://deel.io
When the page loads, there is a half-second or so white flash that appears on the screen.
The white flash goes away if I comment out the line of code that puts the markers on the map:
markersArray[i].setMap(map);
Yet this flash has only just started appearing, so it must be some other code that is causing the above code now to cause the flash.
I realize this is impossibly difficult to help with unless you've seen it before. That's what I'm hoping for--that someone had this exact thing happen to them and knows right away what I am probably doing wrong.
My code is basically all JS/jQuery.
Please see edit below.
I reproduced the problem using Chrome once, every other time after that I couldn't see the white flash. Even with different browsers.
Your probably going to have backtrack all your changes until the problem goes away to see what you introduced that's causing the problem. Hopefully you've been using source control.
I hope you get more replies - although this is a very specific issue that I could only repro once.