updateFloatingTitle: add safety offset to hide/show because mozilla can't into math

css/cdm.less

@@ -237,15 +237,17 @@ div#floatingTitle {
 
 		i.material-icons {
 			margin-left : 2px;
-			font-size : 20px;
+			font-size : 21px;
 			padding : 2px;
 			user-select: none;
 		}
 
-		i.anchor {
+		i.icon-anchor {
 			margin-left : 0px;
+			margin-right : 1px; // replaces checkbox which is a bit wider
 			padding : 0px;
 			color : #ccc;
+			cursor : pointer;
 		}
 	}
 
@@ -264,10 +266,6 @@ div#floatingTitle {
 		font-family : @fonts-ui-bold;
 	}
 
-	img.anchor {
-		margin-left : 0px;
-	}
-
 	div.feed {
 		padding-right : 10px;
 		color : @default-text;

css/default.css

@@ -1238,15 +1238,17 @@ div#floatingTitle .right > * {
 div#floatingTitle .left i.material-icons,
 div#floatingTitle .right i.material-icons {
   margin-left: 2px;
-  font-size: 20px;
+  font-size: 21px;
   padding: 2px;
   user-select: none;
 }
-div#floatingTitle .left i.anchor,
+div#floatingTitle .left i.icon-anchor,
-div#floatingTitle .right i.anchor {
+div#floatingTitle .right i.icon-anchor {
   margin-left: 0px;
+  margin-right: 1px;
   padding: 0px;
   color: #ccc;
+  cursor: pointer;
 }
 div#floatingTitle span.author {
   color: #555555;
@@ -1261,9 +1263,6 @@ div#floatingTitle a.title {
   text-rendering: optimizelegibility;
   font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-div#floatingTitle img.anchor {
-  margin-left: 0px;
-}
 div#floatingTitle div.feed {
   padding-right: 10px;
   color: #555555;

js/Headlines.js

@@ -158,6 +158,7 @@ define(["dojo/_base/declare"], function (declare) {
 		updateFloatingTitle: function (status_only) {
 			if (!App.isCombinedMode()/* || !App.getInitParam("cdm_expanded")*/) return;
 
+			const safety_offset = 120; /* px, needed for firefox */
 			const hf = $("headlines-frame");
 			const elems = $$("#headlines-frame > div[id*=RROW]");
 			const ft = $("floatingTitle");
@@ -165,7 +166,7 @@ define(["dojo/_base/declare"], function (declare) {
 			for (let i = 0; i < elems.length; i++) {
 				const row = elems[i];
 
-				if (row && row.offsetTop + row.offsetHeight > hf.scrollTop) {
+				if (row && row.offsetTop + row.offsetHeight > hf.scrollTop + safety_offset) {
 
 					const header = row.select(".header")[0];
 					const id = row.getAttribute("data-article-id");
@@ -176,7 +177,7 @@ define(["dojo/_base/declare"], function (declare) {
 							ft.setAttribute("data-article-id", id);
 							ft.innerHTML = header.innerHTML;
 
-							ft.select(".dijitCheckBox")[0].outerHTML = "<i class=\"material-icons anchor\" onclick=\"Article.cdmScrollToId(" + id + ", true)\">expand_more</i>";
+							ft.select(".dijitCheckBox")[0].outerHTML = "<i class=\"material-icons icon-anchor\" onclick=\"Article.cdmScrollToId(" + id + ", true)\">expand_more</i>";
 
 							this.initFloatingMenu();
 
@@ -202,11 +203,16 @@ define(["dojo/_base/declare"], function (declare) {
 
 					ft.style.marginRight = hf.offsetWidth - row.offsetWidth + "px";
 
-					if (header.offsetTop + header.offsetHeight < hf.scrollTop + ft.offsetHeight - 5 &&
+					/* if (header.offsetTop + header.offsetHeight < hf.scrollTop + ft.offsetHeight - 5 &&
 						row.offsetTop + row.offsetHeight >= hf.scrollTop + ft.offsetHeight - 5)
 						Element.show(ft);
 					else
-						Element.hide(ft);
+						Element.hide(ft); */
+
+					if (hf.scrollTop - row.offsetTop <= header.offsetHeight + safety_offset)
+						ft.fade({duration: 0.2});
+					else
+						ft.appear({duration: 0.2});
 
 					return;
 				}

themes/night.css

@@ -1238,15 +1238,17 @@ div#floatingTitle .right > * {
 div#floatingTitle .left i.material-icons,
 div#floatingTitle .right i.material-icons {
   margin-left: 2px;
-  font-size: 20px;
+  font-size: 21px;
   padding: 2px;
   user-select: none;
 }
-div#floatingTitle .left i.anchor,
+div#floatingTitle .left i.icon-anchor,
-div#floatingTitle .right i.anchor {
+div#floatingTitle .right i.icon-anchor {
   margin-left: 0px;
+  margin-right: 1px;
   padding: 0px;
   color: #ccc;
+  cursor: pointer;
 }
 div#floatingTitle span.author {
   color: #555555;
@@ -1261,9 +1263,6 @@ div#floatingTitle a.title {
   text-rendering: optimizelegibility;
   font-family: "Segoe WP Semibold", "Segoe UI Semibold", "Segoe UI Web Semibold", "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-div#floatingTitle img.anchor {
-  margin-left: 0px;
-}
 div#floatingTitle div.feed {
   padding-right: 10px;
   color: #555555;