Broken favicon on Chrome, IE11 and Edge after some clicks

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X, 7.1.X
• Fix Version/s: 7.0.0 DXP FP66, 7.0.X, 7.1.10 DXP FP5, 7.1.10.1 SP1, 7.1.2 CE GA3, 7.1.X, Master
• Component/s: Frontend Infrastructure
• Labels:
  • ee-ts
  • liferay-dxp-70-sp10
  • liferay-dxp-71-sp1
  • liferay-fixpack-de-66-7010
  • liferay-fixpack-dxp-5-7110
• Branch Version/s:
  7.1.x, 7.0.x
• Backported to Branch:
  Committed
• Story Points: 0.25
• Fix Priority: 3
• Sprint: S02E03 - L.A. Confidential, S02E04 - Home alone, S02E05 - Edward Scissorhands
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/65487

Description:
The issue can be reproduced in different ways on IE/Edge or Chrome, it does not happen on Firefox.

After some clicks, the favicon falls back to the previously applied one and, if no favicon was previously applied, a dummy blank favicon is used. There are two different ways of consistently reproducing this issue, depending whether on Chrome or IE/Edge.

Preparation steps:

0) Get a vanilla DXP and patch it with de-59-7010
1) Add the below in the portal-ext.properties:

terms.of.use.required=false
users.reminder.queries.enabled=false
users.reminder.queries.custom.question.enabled=false
setup.wizard.enabled=false
passwords.default.policy.change.required=false

database.indexes.update.on.startup=true

browser.launcher.url=

2) Ensure the following directories are empty:

Liferay/work
Liferay/osgi/state
Tomcat/work
Tomcat/temp

3) Start the server and, on Firefox, login as admin and create 4 public pages

IE11/Edge:

4) Clear all browsing history on Edge/IE11 and set http://localhost:8080/web/guest as the home page
5) Close both browsers
6) Open them and start clicking on the pages in the Navigation Menu portlet

Expected: Favicon in the browser's tab to be the default one for Liferay DXP and persist on page navigation
Actual behavior: After some clicks, the correct favicon is not applied.
--> On IE11, it falls back to the browser's default "e"-shaped icon
--> On Edge, a default dummy blank favicon appears instead

Please see attached video IE11_Edge_reproduction.mp4 showing the reproduction.

Chrome

7) Create a dummy theme with the Liferay yeoman Theme Generator. The theme should only have 1 change, that is, a custom favicon.ico file in src/images folder. You can find one attached here: for convenience, the Liferay 7.1 branch favicon is being used
8) Deploy that theme and apply it to all Public pages
9) Open Chrome in Incognito, navigate to the Welcome page, assert the 7.1 favicon is being used. Start clicking on other pages in the Navigation Menu portlet

Expected: The 7.1 favicon to always persist
Actual behavior: At the third click, the favicon will fall back to the default DXP one. If you navigate to pages where the correct favicon was applied before (for example, the Welcome page), the DXP favicon will be applied there as well.

Please see attached video chrome_reproduced.mp4 showing the reproduction.

Branch 7.0.x-private @ 1b8e12ac0cd44c87e6b4d9717e91f263a1d52462402337b6484348dba45f7c77:
 Chrome issue: Not reproducible
 IE11/Edge issue: Reproducible

Master master-private @ a0754e6717f755294b8d6e7a6b123cde7cc6f2be6175b84f17839900e58acbb9: 
 Chrome, IE11, Edge: Not reproducible

 In both cases, these help to temporarily resolve the issue:

• F5
• CTRL + SHIFT + R
• Open the page by pasting its url in a new blank browser's tab
• Disable SPA

 Some possible matches I found:
https://github.com/liferay/senna.js/issues/228
https://github.com/liferay/senna.js/issues/124
https://bugs.chromium.org/p/chromium/issues/detail?id=39402
https://github.com/ctrlplusb/react-universally/issues/145