SOLVED

Is there a way to prevent Edge from white background flickering loading when using the dark theme

%3CLINGO-SUB%20id%3D%22lingo-sub-1969553%22%20slang%3D%22en-US%22%3EIs%20there%20a%20way%20to%20prevent%20Edge%20from%20white%20background%20flickering%20loading%20when%20using%20the%20dark%20theme%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1969553%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20on%20latest%20Dev%20channel%3CBR%20%2F%3E%3CBR%20%2F%3EWhen%20using%20the%20Edge%20dark%20theme%20with%20MS%20Edge%20and%20a%20new%20domain%20is%20loaded%20the%20page%20flickers%20white%20for%20a%20moment%20when%20the%20Edge%20dark%20theme%20is%20enabled.%20This%20causes%20eye%20strain%20as%20the%20screen%20goes%20from%20dark%20to%20white%20to%20dark%20again.%20The%20same%20behaviour%20does%20not%20occur%20in%20Google%20Chrome%20when%20dark%20theme%20is%20selected.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EMultiple%20ways%20to%20simulate%3CBR%20%2F%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E1.%20Change%20of%20domain%20in%20same%20tab%20by%20clicking%20on%20a%20link.%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3ENavigate%20to%20your%20twitter%20account%20dark%20theme%20and%20go%20a%20twitter%20profile%20e.g.%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftwitter.com%2Fdocsmsft%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Ftwitter.com%2Fdocsmsft.%20%3C%2FA%3E%26nbsp%3BOn%20that%20page%2C%20click%20on%20the%20profile%20link%20to%20the%20dark%20theme%20enabled%20site%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20nofollow%22%3Edocs.microsoft.com%3C%2FA%3E%26nbsp%3Band%20it%20flashes%20white%20for%20a%20split%20second%20despite%20the%20default%20edge%20theme%20being%20dark.%20Google%20chrome%20works%20correctly%20and%20doesn't%20flash%20white%20for%20this%20situation.%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E2.%20Manually%20type%20in%20the%20address%20bar%20another%20domain%20page%20when%20a%20site%20is%20already%20loaded%3C%2FDIV%3E%3CDIV%3E%3CBR%20%2F%3EWhen%20an%20existing%20URL%20is%20loaded%20in%20a%20tab%2C%26nbsp%3B%20type%20in%20a%20different%20domain%20URL%20in%20the%20address%20bar.%20While%20loading%20the%20new%20page%20the%20browser%20background%20flashes%20white%20for%20a%20moment.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FDIV%3E%3CDIV%3E%3CP%3E%3CSPAN%3E3.%20URL%20redirects.%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CBR%20%2F%3EIn%20Google%20Chrome%20type%20in%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22http%3A%2F%2Fbbc.co.uk%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttp%3A%2F%2Fbbc.co.uk%3C%2FA%3E%3CSPAN%3E.%20This%20redirects%20to%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fbbc.co.uk%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fbbc.co.uk%3C%2FA%3E%3CSPAN%3E%26nbsp%3Bas%20well%20as%20then%20a%20regional%20page%20refresh.%20In%20between%20there%20is%20a%20white%20background%20page%20flashes%20despite%20my%20default%20theme%20is%20dark.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EIn%20Google%20Chrome%20you%20do%20the%20same%20but%20the%20in%20between%20redirect%20pages%20flashes%20are%20dark%20because%20the%20default%20theme%20being%20dark.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E4.%20When%20clicking%20on%20a%20link%20on%20a%20site%20that%20opens%20a%20new%20domain%20sometimes%20the%20about%3Ablank%20address%20page%20sometimes%20loads%20for%20a%20split%20second%2C%20which%20is%20white%20before%20the%20new%20domain%20loads%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EHow%20it%20should%20work.%3CBR%20%2F%3EThe%20background%20colour%20of%20the%20flashes%20between%20the%20site%20loads%20should%20be%20the%20colour%20of%20your%20default%20theme's%20background.%26nbsp%3B%3CBR%20%2F%3EGoogle%20chrome%20currently%20works%20like%20this.%3CBR%20%2F%3E%3CBR%20%2F%3EThe%20white%20flashing%20issue%20occurs%20both%20with%20the%20standard%20MS%20Edge%20dark%20theme%20as%20well%20as%20if%20you%20use%20a%20custom%20theme%20in%20Edge%20installed%20from%20Chrome%20store.%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1970411%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20a%20way%20to%20prevent%20Edge%20from%20white%20background%20flickering%20loading%20when%20using%20the%20dark%20them%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1970411%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F815445%22%20target%3D%22_blank%22%3E%40zagid%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Efor%20me%20the%20flash%2C%20or%20the%20brief%20blank%20(loading)%20screen%2C%20is%20black.%20I%20repeated%20every%20steps%20you%20provided%20to%20reproduce%20this%20problem.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethe%20BBC%20page%20shows%20white%20background%20during%20loading%20because%20the%20website%20itself%20is%20designed%20to%20have%20a%20white%20background%2C%20it's%20not%20the%20same%20as%20flash%2C%20so%20it%20could%20be%20confused.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ebut%20either%20way%2C%20I'm%20on%20Edge%26nbsp%3B%3CSPAN%3EVersion%2089.0.727.0%20(Official%20build)%20canary%20(64-bit)%3C%2FSPAN%3E%3C%2FP%3E%3CP%3Eeven%20before%20this%20version%2C%20I%20didn't%20have%20this%20problem.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETry%20to%20submit%20a%20feedback%20using%20feedback%20button%20on%20Edge%20or%20shortcuts%20Alt%20%2B%20Shift%20%2B%20i.%3C%2FP%3E%3CP%3Efrom%20attachments%20%3D%26gt%3B%20recreate%20my%20problem%20%3D%26gt%3B%20start%20recording.%20and%20while%20it's%20recording%2C%20repeat%20the%20steps%20and%20let%20it%20record%20to%20send%20the%20data%20along%20with%20your%20feedback.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1970720%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20a%20way%20to%20prevent%20Edge%20from%20white%20background%20flickering%20loading%20when%20using%20the%20dark%20them%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1970720%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX%3C%2FA%3E%26nbsp%3BUsing%20the%20twitter%20example.%3CBR%20%2F%3E%3CBR%20%2F%3Eif%20you%20click%20on%20the%20profile%20link%20it%20uses%20a%20twitter%20URL%20shorterner%20to%20the%20microosft%20docs%20website%20which%20gets%20the%20dark%20mode%20from%20your%20windows%20settings.%3CBR%20%2F%3EThe%20twitter%20URL%20shortener%2C%20in%20the%20fraction%20of%20the%20second%20it%20shows%20in%20the%20address%20bar%20as%20%3CA%20href%3D%22https%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%3C%2FA%3E%26nbsp%3Bwill%20then%20have%20a%20white%20background%20despite%20the%20edge%20theme%20being%20dark%2C%20the%20twitter%20site%20being%20a%20dark%20theme%20and%20the%20microsoft%20site%20being%26nbsp%3B%20a%20dark%20theme.%3CBR%20%2F%3E%3CBR%20%2F%3EWhen%20you%20test%20the%20URL%20on%20edge%20with%20dark%20theme%20enabled%20it%20doesn't%20show%20white%20but%20shows%20correctly%20dark%20the%20fraction%20of%20the%20second%20the%20URL%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%3C%2FA%3E%26nbsp%3Bshows%20in%20the%20address%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1970815%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20a%20way%20to%20prevent%20Edge%20from%20white%20background%20flickering%20loading%20when%20using%20the%20dark%20them%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1970815%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F815445%22%20target%3D%22_blank%22%3E%40zagid%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CHR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F815445%22%20target%3D%22_blank%22%3E%40zagid%3C%2FA%3E%26nbsp%3Bwrote%3A%3CBR%20%2F%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX%3C%2FA%3E%26nbsp%3BUsing%20the%20twitter%20example.%3CBR%20%2F%3E%3CBR%20%2F%3Eif%20you%20click%20on%20the%20profile%20link%20it%20uses%20a%20twitter%20URL%20shorterner%20to%20the%20microosft%20docs%20website%20which%20gets%20the%20dark%20mode%20from%20your%20windows%20settings.%3CBR%20%2F%3EThe%20twitter%20URL%20shortener%2C%20in%20the%20fraction%20of%20the%20second%20it%20shows%20in%20the%20address%20bar%20as%20%3CA%20href%3D%22https%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%3C%2FA%3E%26nbsp%3Bwill%20then%20have%20a%20white%20background%20despite%20the%20edge%20theme%20being%20dark%2C%20the%20twitter%20site%20being%20a%20dark%20theme%20and%20the%20microsoft%20site%20being%26nbsp%3B%20a%20dark%20theme.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CP%3EI%20tried%20this%2010%20times%20just%20now%2C%20at%20no%20point%20i%20get%20a%20white%20flash%20or%20white%20background%2C%20it's%20always%20dark.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFrom%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftwitter.com%2Fdocsmsft%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ftwitter.com%2Fdocsmsft%3C%2FA%3E%3C%2FP%3E%3CP%3ETo%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ft.co%2FpBNlKvAduu%3Famp%3D1%3C%2FA%3E%3C%2FP%3E%3CP%3Eand%20then%20this%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eall%20of%20them%20stay%20dark%20for%20me.%20I%20recorded%20a%201080p%2060fps%20video%20of%20it%20to%20show%20you%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fstreamable.com%2Fd5wjti%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fstreamable.com%2Fd5wjti%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2019503%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20a%20way%20to%20prevent%20Edge%20from%20white%20background%20flickering%20loading%20when%20using%20the%20dark%20them%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2019503%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX%3C%2FA%3E%26nbsp%3BThe%26nbsp%3Bwhite%20background%20flickering%20problem%20disappeared%20without%20any%20changes%20on%20my%20side.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

I am on latest Dev channel

When using the Edge dark theme with MS Edge and a new domain is loaded the page flickers white for a moment when the Edge dark theme is enabled. This causes eye strain as the screen goes from dark to white to dark again. The same behaviour does not occur in Google Chrome when dark theme is selected.


Multiple ways to simulate
 

1. Change of domain in same tab by clicking on a link.
 
Navigate to your twitter account dark theme and go a twitter profile e.g. https://twitter.com/docsmsft.  On that page, click on the profile link to the dark theme enabled site docs.microsoft.com and it flashes white for a split second despite the default edge theme being dark. Google chrome works correctly and doesn't flash white for this situation.
 
2. Manually type in the address bar another domain page when a site is already loaded

When an existing URL is loaded in a tab,  type in a different domain URL in the address bar. While loading the new page the browser background flashes white for a moment.

3. URL redirects.


In Google Chrome type in 
http://bbc.co.uk. This redirects to https://bbc.co.uk as well as then a regional page refresh. In between there is a white background page flashes despite my default theme is dark.

In Google Chrome you do the same but the in between redirect pages flashes are dark because the default theme being dark.

 

4. When clicking on a link on a site that opens a new domain sometimes the about:blank address page sometimes loads for a split second, which is white before the new domain loads 

How it should work.
The background colour of the flashes between the site loads should be the colour of your default theme's background. 
Google chrome currently works like this.

The white flashing issue occurs both with the standard MS Edge dark theme as well as if you use a custom theme in Edge installed from Chrome store.
6 Replies

@zagid 

for me the flash, or the brief blank (loading) screen, is black. I repeated every steps you provided to reproduce this problem.

 

the BBC page shows white background during loading because the website itself is designed to have a white background, it's not the same as flash, so it could be confused.

 

but either way, I'm on Edge Version 89.0.727.0 (Official build) canary (64-bit)

even before this version, I didn't have this problem.

 

Try to submit a feedback using feedback button on Edge or shortcuts Alt + Shift + i.

from attachments => recreate my problem => start recording. and while it's recording, repeat the steps and let it record to send the data along with your feedback.

@HotCakeX Using the twitter example.

if you click on the profile link it uses a twitter URL shorterner to the microosft docs website which gets the dark mode from your windows settings.
The twitter URL shortener, in the fraction of the second it shows in the address bar as https://t.co/pBNlKvAduu?amp=1 will then have a white background despite the edge theme being dark, the twitter site being a dark theme and the microsoft site being  a dark theme.

When you test the URL on edge with dark theme enabled it doesn't show white but shows correctly dark the fraction of the second the URL https://t.co/pBNlKvAduu?amp=1 shows in the address




@zagid 


@zagid wrote:

@HotCakeX Using the twitter example.

if you click on the profile link it uses a twitter URL shorterner to the microosft docs website which gets the dark mode from your windows settings.
The twitter URL shortener, in the fraction of the second it shows in the address bar as https://t.co/pBNlKvAduu?amp=1 will then have a white background despite the edge theme being dark, the twitter site being a dark theme and the microsoft site being  a dark theme.

I tried this 10 times just now, at no point i get a white flash or white background, it's always dark.

 

From https://twitter.com/docsmsft

To https://t.co/pBNlKvAduu?amp=1

and then this https://docs.microsoft.com/en-us/

 

all of them stay dark for me. I recorded a 1080p 60fps video of it to show you

 

https://streamable.com/d5wjti

 

best response confirmed by zagid (Occasional Contributor)
Solution

@HotCakeX 

I am on 

Version 89.0.723.0 (Official build) dev (64-bit)
 
 

I did 3 tests. Make sure to refresh the page before each test.

See below for the screen recordings


--------------------------------------------------------

Test 1: New Edge profile with no extensions but only default dark theme

Open  https://twitter.com/docsmsft

Click Refresh (Ctrl+R)
Click on profile link

- about:blank shows white background for millisecond

https://t.co/pBNlKvAduu?amp=1 shows dark background

https://docs.microsoft.com/en-us/ shows dark background


--------------------------------------------------------
Test 2: New profile with Microsoft theme installed
Same as Test 1 but install Microsoft theme from Edge addons:

 https://microsoftedge.microsoft.com/addons/detail/wonder-woman-1984-theme/gialgoiafhiabneafjiimeihdi...


After link is clicked: 

about:blank is white

https://t.co/pBNlKvAduu?amp=1 is blue background (from theme) .

https://docs.microsoft.com/en-us/ is dark


Screen recording: https://streamable.com/w42izd


--------------------------------------------------------
Test 3:
Same as test 2 except with normal Edge profile which has many extensions (around 10) and tabs(50) opens (usual usage)

 

After link is clicked: 

about:blank is white but for much longer duration

https://t.co/pBNlKvAduu?amp=1 is blue background (from theme) .

https://docs.microsoft.com/en-us/ is dark

 

 

Screen recording:  https://streamable.com/hzgnwu

 

 

---------------

Testing all 3 tests in Google Chrome with same theme loaded and I get no white background loading.

 

 

@HotCakeX The white background flickering problem disappeared without any changes on my side.