1602338 - The anchor (through id attribute) is not correctly positioned

Status: RESOLVED WORKSFORME

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[Karl Dubost💡 :karlcow]

1. Go to https://www.spiele-entwickler-spieltrieb.de/shop/#cc-m-product-15566830724

Expected:
Be positioned on the right product.

Actual:
The position is slightly shifted up.

If it doesn't reproduce on first load, you may want to shift reload, a simple reload positions it at the right place. It seems to be like a computation of the position before having all elements in place.

Chrome positions correctly.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

A reduced test-case for this would be pretty amazing.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Karl, is there any chance you could try to reduce / diagnose this a bit more? I can't repro this if I save the page locally... I suspect this is an interaction with the order in which stylesheets are applied and the web.js script changing stuff async.

Is there an easy way to test whether removing the async attribute for that script helps with reproducibility or makes the bug go away?

Comment 3

[Karl Dubost💡 :karlcow]

Attachment: shifted boxes

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

To replace

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

by

<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

.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.

Comment 4

[Karl Dubost💡 :karlcow]

Attachment: box positions

Only the last box is positioned weirdly.
it seems they are using a library which tries to emulate a flexbox behavior using float

And the difference is created by

.j-product > div:target::before {
	content: '';
	display: block;
	height: 120px;
	margin-top: -120px;
	visibility: hidden;
}

once I remove this. Everything is working.
So now the issue is more why this has a different behavior in Chrome/Safari and in Firefox.

Safari positioned correctly the content too.

hmm going back to the drawing board and restart with the non modified page.

With the async the issue is worse for the positioning BUT the wronly sized CSS box is still the same. So Maybe there are two issues intertwined or a cascade of issues

if I link to
https://www.spiele-entwickler-spieltrieb.de/shop/#cc-m-15566827224 aka the global id for the product line. It positioned correctly minus the navigation bar.

if I choose another product things are alright.
https://www.spiele-entwickler-spieltrieb.de/shop/#cc-m-product-10890452524

I think I understand the trick for the ::before it was made to avoid the navigation bar probably.

BASELINE:

1. the last item of the page is being shifted and doesn't position correctly
2. The last item has a strange box compared to others.
3. ::before is creating a block above the page to reposition it.
4. They would be better off with a design based on flexbox and position the wrapper for the list of products 80 pixels below the top, so they can link to items without a hack.
5. I don't think they would fix it. Probably it was ordered, then delivered, then no more contracts to fix it.
6. Chrome/Safari seems to not have the issue of the last item

Comment 5

[Dennis Schubert [:denschub]]

Chrome agrees with Firefox on that one now, so does Safari.