I am working on an Office Word add-in using Angular 5. I have a weird issue where clicking on any route link scales the viewport zoom level down by a small percentage each click until everything is very small. I have set the location strategy to hash.
- I have removed all css and still experience the issue.
- Tried with and without viewport meta tag and @-ms-viewport css property with various settings.
- Tried setting the X-UA-Compatible meta tag to various versions of IE.
Wondering if anyone has experienced similar.
Update:
I have tried with the following add-in and experience the same issue by clicking on the route links. https://github.com/OfficeDev/Word-Add-in-Angular2-StyleChecker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Office Add In</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Main Template
<div class="root-navigation">
<div class="navigation-links">
<a routerLink="/tab1" [routerLinkActive]="['active']">
Tab 1
</a>
<a routerLink="/tab2" [routerLinkActive]="['active']">
Tab 2
</a>
</div>
</div>
<div class="root-viewport">
<router-outlet></router-outlet>
</div>
