Bug 1602338 Comment 3 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Yes it seems to be that this is something related about materials coming later in the page. 
> It seems to be like a computation of the position before having all elements in place.

As for reducing it I'm pretty sure it will be challenging. 

Using [DITM](https://addons.mozilla.org/en-US/firefox/addon/ditm/reviews/)

To replace

```html
<script src="https://assets.jimstatic.com/web.js.b70027fa55157c3409c0.js" async="true"></script>
```
by 

```html
<script src="https://assets.jimstatic.com/web.js.b70027fa55157c3409c0.js"></script>
```

So this didn't solve the issue. I double check we were loading the right modified page.



Using this time
https://www.spiele-entwickler-spieltrieb.de/shop/#cc-m-10890395224
I can see that the issue is less visible or slightly different. This item is higher in the list (is there a cumulative effect?)
I see one issue. Because of  the top menu `.jtpl-navigation`, the position of the linked element is getting under the navigation bar, so it's not entirely visible. This is due to the `position: fixed`

```css
.jtpl-navigation {
	height: auto;
	-ms-flex: 1;
	flex: 1;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	position: fixed;
	z-index: 10;
	text-align: right;
	font-family: 'Julius Sans One',Helvetica Neue,Helvetica,Arial,sans-serif;
	background-color: #f7f8f8;
	min-height: 80px;
}
```

Ah maybe I just found? Let's draw some outlines.

* The `id` for the full line of the product `#cc-m-15566827224` red dashed
* The `id` for `#cc-m-15566830724` our target pink dashed and gold dashed

<div id="cc-m-15566830724" class="j-module n j-product ">
	<div id="cc-m-product-15566830724" itemscope="" itemtype="http://schema.org/Product">
         …
	</div>
	<!-- end of div#cc-m-product-6356026884 -->
</div>

1. there are two nested `id` with the **same value**
2. The boxes are shifted toward the top. 

So probably Firefox gives the right position on the wrong positioned box. So the issue is probably different, than what I thought initially. 

Let's explore a bit more.
Yes it seems to be that this is something related about materials coming later in the page. 
> It seems to be like a computation of the position before having all elements in place.

As for reducing it I'm pretty sure it will be challenging. 

Using [DITM](https://addons.mozilla.org/en-US/firefox/addon/ditm/reviews/)

To replace

```html
<script src="https://assets.jimstatic.com/web.js.b70027fa55157c3409c0.js" async="true"></script>
```
by 

```html
<script src="https://assets.jimstatic.com/web.js.b70027fa55157c3409c0.js"></script>
```

So this didn't solve the issue. I double check we were loading the right modified page.



Using this time
https://www.spiele-entwickler-spieltrieb.de/shop/#cc-m-10890395224
I can see that the issue is less visible or slightly different. This item is higher in the list (is there a cumulative effect?)
I see one issue. Because of  the top menu `.jtpl-navigation`, the position of the linked element is getting under the navigation bar, so it's not entirely visible. This is due to the `position: fixed`

```css
.jtpl-navigation {
	height: auto;
	-ms-flex: 1;
	flex: 1;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	position: fixed;
	z-index: 10;
	text-align: right;
	font-family: 'Julius Sans One',Helvetica Neue,Helvetica,Arial,sans-serif;
	background-color: #f7f8f8;
	min-height: 80px;
}
```

Ah maybe I just found? Let's draw some outlines.

* The `id` for the full line of the product `#cc-m-15566827224` red dashed
* The `id` for `#cc-m-15566830724` our target pink dashed and gold dashed

<div id="cc-m-15566830724" class="j-module n j-product ">
	<div id="cc-m-product-15566830724" itemscope="" itemtype="http://schema.org/Product">
         …
	</div>
	<!-- end of div#cc-m-product-6356026884 -->
</div>

1. there are two nested `id` <del>with the **same value**</del> wrong. there are different.
2. The boxes are shifted toward the top. 

So probably Firefox gives the right position on the wrong positioned box. So the issue is probably different, than what I thought initially. 

Let's explore a bit more.

Back to Bug 1602338 Comment 3