There is an unusual behavior when using the scroll bar from Angular Material cdk-virtual-scroll-viewport using Firefox 88+ (Linux, Windows), Chrome works fine. The scrollbar jumps, remaining on top / bottom of the cursor, or it just doesn't move at all. It can be reproduced by opening Material page in FF. Interestingly, only the last one works fine (Virtual scroll with no template caching). The same behavior was observed in other library, ngx-datatable.
While debugging, I noticed that when using FF safe mode the error goes away. I tried manually disabling all extensions, add-ons, plugins, themes, but the error persists.
I can't reproduce this issue, but it looks like something with hardware acceleration.
In addition to disabling add-ons (extensions and themes) and turning off hardware acceleration, Firefox Troubleshoot Mode disables Enhanced Tracking Protection and Safe Browsing features. Firefox Troubleshoot Mode also disables the JavaScript Just-in-time (JIT) compiler and ignores the optional userContent.css and userChrome.css files (if present). The xulstore.json file, which saves customizations to window sizes, toolbar settings and controls, is also ignored; however, any changes stored in modified preferences remain in effect.
I have buttons on the bottom of the screen that is covered up by the TestCafe footer when I stop for client-side debugging (t.debug). When I select "Unlock Page" I can interact with my app except for any widgets under the footer. My app has a button toolbar at the bottom which makes the manual interactive mode pretty useless.
NOTE: I can tab to the buttons in the toolbar and hit enter, but this is not a workaround my QA department finds acceptable from an efficiency standpoint.
Is there any way to make the footer disappear or to make the web page act as if its viewport ends above the footer?
Currently, there's no way to hide the footer or move the page content above it. We are aware of this limitation and will work on improving this behavior in the context of this thread:
Allow access to elements under the status panel in debug mode
I don't know why my firefox Responsive Design Mode view doesn't look like it is presented in MDN ?
MDN view:
My view:
I am using firefox 53.0.2 on PC.
There are (at least) two preferences controlling whether the old Responsive Design Mode UI or the new one is shown:
devtools.responsive.html.enabled needs to be set to true => Directly controls whether the reworked UI is displayed.
browser.tabs.remote.autostart.2 needs to be set to true => Controls whether multi-process Firefox is enabled and the new RDM UI obviously doesn't work in single-process Firefox instances.
To check whether the multi-process mode is enabled, go to about:support and ensure that the value at "Multiprocess Windows" says "Enabled".
Those preferences can be changed via about:config.
Note: Once you enable the multi-process setting, add-ons that don't support this feature like e.g. Firebug won't work anymore.
I'm trying to do this tutorial on using the timeline: https://developer.chrome.com/devtools/docs/demos/too-much-layout
Unfortunately when I go to the timeline in Chrome I am not seeing the view mode options "Events", "Frames" and "Memory". I've read other tutorials and they all seem to show these view modes but for the life of me I cannot figure out how to see them. This is what I see: http://imgur.com/33XEfJ5
Please note that this is not an issue with my version of Chrome. I actually was able to see the view modes when I hooked up my phone and ran the inspector through chrome://inspect. But I need to be able to see them when on my laptop as well.
In the new version the UI was slightly changed.
You can flip overview to frame mode by clicking a small button with vertical bars at the top.
Also memory mode might be enabled by checking Memory checkbox.
Can someone please explain the difference between IE8 browser mode and document mode in simple terms?
What causes the browser mode to change?
What causes the document mode to change?
If a user changes the mode(s) via developer tools, does the change remain even if the page is refreshed?
I am asking this because we are doing some IE8 testing here, and different people have different combinations of the modes, and i want to try to figure out how this is happening.
From this article on the IE8 blog, entitled How IE8 Determines Document Mode
The Developer Tools settings override all Document Modes for pages displayed in a tab.
The X-UA-Compatible meta tag and then header override Compatibility View Settings and the doctype unless the X-UA-Compatible value is EmulateIE7 or EmulateIE8.
The user’s Compatibility View Settings override the Microsoft Compatibility View List.
If none of the above rules apply, the doctype determines whether the webpage renders in IE8 Standards, IE8 Almost Standards or Quirks Mode.
So from that we get the following answers to your questions:
Q. What is the difference between browser mode and document mode in simple terms?
A. Browser mode is set in the developer tools to emulate different IE browser version behaviors while document mode is defined on the web page to tell IE to render the site differently for compatibility purposes.
Q. What causes the browser mode to change?
A. The user changes the browser mode in the dev tools.
Q. What causes the document mode to change?
A. The Doctype and the X-UA-Compatible meta tag and header set by the web developer.
Q. If a user changes the mode(s) via developer tools, does the change remain even if the page is refreshed?
A. The Browser Mode will stay, but if you change the Doctype and X-UA-Compatible, they will go back to what is defined on the page.
UPDATE: As Adrien Be points out below, IE9+ adds the ability to change the document mode in the dev tools via a setting which will persist on refresh.
See your answer in this page.
The documentMode property returns the mode used by the browser to render the current document.
IE8 can render a page in different modes, depending on the !DOCTYPE or the presence of certain HTML elements.
This property returns one of following values:
5 - The page is displayed in IE5 mode
7 - The page is displayed in IE7 mode
8 - The page is displayed in IE8 mode
9 - The page is displayed in IE9 mode
Note: If no !DOCTYPE is specified, IE8 renders the page in IE5 mode!
Browser Mode: Specifies the user agent sent by the browser to the Web Server. Rendering differences can occur if your JavaScript or back-end code renders differently based on the user agent string. For example, you may see JavaScript that checks navigator.userAgent. (Mozilla/5.0 (compatible; MSIE 8.0...) This value is also used to to process conditional comments ([if lte IE 9], [if gt IE 8], etc.). The Emulation tooling in IE 11 does not have a browser mode. It has a user agent drop-down instead.
Document Mode: Specifies the rendering engine used to process the markup. This is typically where we see rendering issues and browser incompatibilities. The original goal (for better or worse) was website owners could choose a document mode for their site via a meta tag. In IE 11, the emulation tools are less confusing.
Testing:
If your goal is to emulate an old IE8 browser, you should change both browser mode and document mode. The emulation is not perfect, so a more thorough option is to download free test VMs from Microsoft where you can test with a *real" version of IE 8, 9, etc.
What causes these values to change?
The Browser mode will not change. (Unless you change it in Dev tools.) It is set before making the request to the web server.
The document mode can change based on web server response. It can be changed via a X-UA-Compatible HTTP response header, the doc type, meta tags, Intranet sites, markup issues, etc.
There is a little button in top left , in IE dev tools -> emulation (tab) that says "Persist emulation settings"
see this :
"Settings persistence and reset
A Persist Emulation settings icon is added to the Emulation tool. This will maintain your current emulation settings until specifically disabled, allowing you to work, close the browser, and come back with your emulation settings intact. To its right is a Reset Emulation settings icon, which quickly resets the tool back to default values."