I've been doing web development for a few years now and have never had a Chrome update break my apps. Chrome build Version 91.0.4472.101 (Official Build) (x86_64) broke every table layout for Windows and Mac users while i was on vacation. The break has something to do with setting the width on table columns. As a temporary workaround I had to change width setting on all tables in all apps to stop using px or vw for width for a table column. To resolve i had to make them all use % Like width: 15%;. Otherwise the view has header columns not lining up with the data or in some cases entire columns of data would not show on the page. The problem is only in Chrome....everything still works fine in Firefox and MS Edge.
I'm more familiar with me or my team mistakenly pushing a breaking change into production. This is the first time I've seen stable web apps in production break because of a change in chrome. How can i prevent this type of catastrophe in the future?.....or is this something i couldn't have done anything to prevent?
I stripped down an app to just enough code to show an example. In example repo, run npm install && npm run serve then open your browser to localhost:8080 then see text at line 23 in src/views/Table.vue
.item-table .example-class {
width: 4vw; // worked great for years, stopped working after chrome 91.0.4472.101
// width: 150px; // worked great for years, stopped working after chrome 91.0.4472.101
// width: 4%; // only thing that seems to work now
}
All other related table styling is in src/assets/css/table.scss
Note that I'm not using it but datatables users are experiencing similar problems.
Your issue is related to the rewrite of table rendering in Chrome 91 (TablesNG): https://developer.chrome.com/blog/tablesng/
If I go to chrome://flags search for TableNG and disable it your test page appears correctly.
There are a few bugs reported: https://bugs.chromium.org/p/chromium/issues/list?q=TablesNG&can=2 you might try logging one yourself.
As for how can you stop this happening in the future, I doubt you can if a chunk of the browser is rewritten and changes its behaviour.
Came across this after company upgraded to 91 from 88. Not sure if this answers this exact question but if you come through here, I had my table container nested in a flex layout that set {display flex; flex 1;} on the div wrapping my {display: table} div container. Just deselected display flex in devTools and boom, Table went back to normal. Not sure what Chrome did to make this happen but it solved our issue.
Related
I have an HTML table with at most 25 columns (usually 5 or 6) and at most 25 rows. Each cell in the table contains a custom Web Component. These are minimal web components. For example, one wraps a number and you can set number formatting (e.g. format as currency) via the attributes. Another just displays a formatted string, etc. I am adding these components dynamically using appendChild on the td.
These Web Components are all using the Shadow DOM - as recommended in the documentation. So I create this simple table (6 rows and 25 columns) and I populate cells with these Web Components. If I do this in Chrome, my system crashes requiring a reboot (sometimes by forcing a shutdown). I tried this in Firefox, and the table renders in less than a second. Also I tried this in Edge and it crashes there too.
I tried re-doing my Web Components to remove the Shadow DOMs and voila, it works fine in Chrome and Firefox.
I don't want to do these component without the Shadow DOMs. Does anyone have any ideas?
Thanks
Update: this is still a problem. I tested in Edge browser and it does indeed work there (albeit a bit slow). Also tested in Safari/ MacOS and it works there too.
What a shame… I have to tell my users they can’t use Chrome and prevent the page from loading.
Update 9/2/2022: Without any changes to my code it is no longer an issue. The only explanation I have is that it might have been happily addressed by a scheduled Chrome update.
Now however, even though my table loads OK, if I open Developer Tools immediately after the table loads, I get a crash with error: 'Debugging Connection closed. Reason: Render process gone.'
Update 9/4/2022: I was overly optimistic about this error. I started testing my app again in Chrome today and the original problem still exists. I create my table in Chrome, interact with it in various ways (e.g. dynamically add a column, add an icon prefix to cell contents of a column, dynamically add a column with a drop-down menu in each cell, etc.) and eventually Chrome will crash.
I no longer expect this to be fixed. I logged a bug report with chromium.org and that is all I can do.
i'm struggling with the classic HTML input of type file. I was using it on my angular application and i had freeze sometimes, the whole browser became unresponsive, and the only thing that works is the scroll.
You can't click any buttons, select any text or even change tab on the browser for about 5 seconds. I tried a lot of different file type and sizes and it doesn't change any of this, it even freeze sometimes when i don't select any file in the explorer and i click the close button directly.
So I thought it was my implementation that was bad and i went to the Mozilla developper website where you have an example and I have exactly the same behaviour. I also tried to take only the HTML from the Mozilla website and put it alone on a .html file and again, same behaviour.
This does not occur 100% of the time, but I would argue that on my end it does it about 60/70 % of the times.
I tried it on chrome and Firefox (both up to date), on multiple computer (all running Windows though) and i have the same behaviour on all of them.
I don't have any error or anyting in the consoles.
I don't know what to do with this, i'm pretty sure it can't be the file's input on the whole web that are bugged, but i tried a lot of various things with always the same results. Should i report it somewhere? ( if so, where? ) Or what would you suggest to do to investigate this further?
I couldn't find anyone discussing this issue on the internet apart for this thread that had no solution, they also say in this thread that the bug is not reproducible in Edge, but i just tried and it does the same thing.
Thanks for reading me and for any help about this.
Chrome freezes for few seconds when after any use of file field.
It was because I had a shortcut in "Quick Access" menu in windows explorer. This shortcut has been linked with a folder shared by network. I've removed this shortcut and everything is good now.
Same here, I have a mapped network drive that is not responding, this make a 5 seconds delay. After unmapping the drive, no more delay. The delay is the same in firefox or chrome.
Same here, if you want to remove it, on Windows 10, click on the icon Quick access (blue star), then right click on the dead link appearing in the "Frequent folders" panel on the right panel and choose "Unpin/Remove from Quick access". There should be no error message.
Problem
I'm having the problem for days and haven't found anyone else mentioned it..
The issue is that when I set the system dpi scaling to 150% or above, some webpages I open in CHtmlView would be messed up, while using IE or Chrome not causing the same problem.
Context
It seems like in CHtmlView the fonts get bigger than it's needed. I figured out this situation happens if my program's "high DPI-aware" property is set. But I can't turn it off either because the webpage would be blurry.
The strange part is when I tested msdn or google paged in CHtmlView, they neither caused the problem nor scale 150%. They just displayed as the 100% one.
Not sure if I should do something to my program or the webpage. The webpage needed to be displayed in my program is also from my company, so if I know what to set in the webpage I could handle it.
Thank you :)
Edit:
Because the website I'm having problem with is a private site, so I use another page to explain the situation.
Webpage in HtmlView, seem like only fonts get bigger.
Webpage in IE
I'm here as I've got the same problem.
You can create a new VS2017 MFC project, derive a view from CHtmlView, you'll find this in the constructed code
void CMFCApplication4View::OnInitialUpdate()
{
CHtmlView::OnInitialUpdate();
Navigate2(_T("http://www.msdn.microsoft.com/visualc/"),nullptr, nullptr);
}
(Note I had to delete the two trailing nullptr arguments to get it to compile)
My application manifest lists the app as being High DPI Aware and I've got a 200% (192dpi) scaled monitor.
The web page that loads is tiny (unscaled).
zett42's answer (Aug 31 '17 at 14:39) is correct. Add the registry key indicated, using
Computer\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
MFCApplication4.exe=11001 [your application name here].
Restart the app, hey presto everythin is correctly scaled.
Dunno why I can't upvote zett42.
i read all other posts related to this problem and:
no, my client is not using any adblocker or other extensions
i'm including the css with the absolute URL
i'm using instead of
The strange thing is that to me everything works perfect on all computers and all browsers.
My client saw it perfectly until last week but the page hasn't been modified! Now they see the famous empty square instead of the right icons.
What could they have installed that stop it ONLY on chrome/desktop.
Chrome is the latest version, same as mine!
Because if it's a problem that only them will see it's fine, but i'd like to understand if there's a common condition that even other users can have.
I build up a stupid page: http://sviluppo3.sitotemporaneo.com/test/ciccio.html
they see 3 blank squares in the top left corner.
Tnx!
This happened to me to today and I manage to fix it.
I had display: block; on the .fa () element, so I removed that and let it be display: inline-block;
inline-block is font-awesome standard to the element
I am using Info.display("", "My message");to display GXT Info box on screen but it is observed that the info box is not rendered properly (with a transparent background not readable properly) in some of user system.
This issue is solved when user clear browser cache and delete temp folder files and start a new session, but the problem is replicated again after some time interval.What could be the reason? I am not able to debug because Message div is deleted in a fraction of 3-4 seconds.I am using sencha 3.0 version.
Your problem sounds similar to the one described in this Sencha GTX 3.x bug report:
http://www.sencha.com/forum/showthread.php?282275-Info-popup-is-transparent-in-IE
You may wish to follow its progress if this issue is still important to you.