safari: the row hovering stay stuck on the last row

[nimeshpokhrel]

Last item is selected even when I click on the first one:

[jmlemetayer]

Hi Nimesh,

What do you want to say by "last item is selected" ? Is it the gray background and the underline ?

It should be working "on hover" and not "on click". This is working for me on the previews: https://jmlemetayer.github.io/abba/previews/default/

And when you have directories, a click on a row should go to the requested directory.

Is it not working for you? What is your browser and version?

[nimeshpokhrel]

I am using safari latest version

Even when I hover on the first, second or any item last item gets highlighted in grey color and same is clicked even if my pointer is on first item

[nimeshpokhrel]

Ok the issues is only on safari Just checked works perfect on other browser

[jmlemetayer]

Yeah I have also tested on safari and I see the issue too. The hovering effect stay stuck on the last item.

Moreover I have tested the bootstrap and bootswatch examples on safari. They seems to be working.

Thanks for the report.

[nimeshpokhrel]

Do fix this soon if you can gotta work with the site. Thanks in advance

Feature Request: Add a icon for pdf file format.

[Egleyser]

Hi! The same happens to me in both Safari and Chrome using the Solar theme: The last item is selected even when I click on the first. Tested from different devices and browsers.

By the way nice work friend, congratulations, everything I was looking for days :)

[digicide]

the a::after pseudo element is position absolute. It seems like it expects the offset parent to be the td, but the td is not set as such. So the offset parent becomes the entire table, and the last a::after on the page fills its offset parent, which is the entire table.

I fixed this in my copy by adding position: relative to td, explicitly making it the offset parent.

[jmlemetayer]

Thanks @digicide it helps a lot.

Since the problem is not reproduced with the standard bootstrap, I think I made a mistake in the integration of the .table-hover class. Or maybe the .stretched-link ...

See: https://github.com/jmlemetayer/abba/blob/main/_sass/abba/_autoindex.scss

[jmlemetayer]

If you have some free time. Pull requests are more than welcome :wink:

[Egleyser]

o pseudo elemento a::after é a posição absoluta. Parece que espera que o pai de deslocamento seja o td, mas o td não está definido como tal. Assim, o pai de deslocamento se torna a tabela inteira, e o último a::after na página preenche seu pai de deslocamento, que é a tabela inteira.

Corrigi isso na minha cópia adicionando position: relative a td, tornando-o explicitamente o pai de deslocamento.

@digicide ou @jmlemetayer can someone fix it please? There is nothing as well developed on the internet as Abba. If pulling is not possible, at least make the file or download available please. Thank you very much in advance.

[Egleyser]

Hi guys, information I think is important for the case. In the tests I did, the mentioned bug only occurs in browsers (Safari, Chrome, Firefox, Opera, among others) for IOS. For any other browser on Android this problem does not occur.

[jmlemetayer]

Hi all,

I am trying to integrate the new bootstrap 5.2.2 version. Since this was not a simple integration and there was some work to be done, I decided to look at this problem at the same time.

So I tried to reproduce the issue first, and I didn't succeed !!!

Since I didn't have time to update ABBA, it can only be Safari. With version 16.0 it works, can you confirm?

It also works with Chrome (107.0.5304.87) on macOS (11.7).

[Egleyser]

Olá a todos,

Estou tentando integrar a nova versão bootstrap 5.2.2. Como essa não era uma integração simples e havia algum trabalho a ser feito, decidi analisar esse problema ao mesmo tempo.

Então tentei reproduzir o problema primeiro, e não consegui!!!

Como não tive tempo de atualizar o ABBA, só pode ser Safari. Com a versão 16.0 funciona, pode confirmar?

Também funciona com o Chrome (107.0.5304.87) no macOS (11.7). Hello friend, I just tested on IOS (Chrome, Safari, Opera) and the same problem remains.

[jmlemetayer]

Hi @Egleyser Thanks for the feedback.

Can you tell me your macOS version and browser versions ? Thanks

[Egleyser]

Yes;

• IOS 15.5 Beta 4
• Chrome 107.0.5304.66
• Safari native of IOS 15.5 Beta 4
• Opera 3.3.8

Later I can test on IOS 16 and report back here.

[jmlemetayer]

From what I saw yesterday, this is a problem with the stretched-link class and table in general.

See: https://getbootstrap.com/docs/5.2/helpers/stretched-link/

Please note given how CSS position works, .stretched-link cannot be mixed with most table elements.

Currently, ABBA uses the last example with the transform: rotate(0). But I want to try the suggestion from here: https://github.com/twbs/bootstrap/issues/28608#issuecomment-614881795

I will create a abba-next project so you can have some GitHub pages to test. I'll post the link when it's ready (hopefully tonight).

Best regards.

[jmlemetayer]

Hi @Egleyser,

I have created the abba-next project. You can see the previews here: https://jmlemetayer.github.io/abba-next/previews/default/

I have use the proposed method and add a green background to see the area covered by the stretched link. I will adjust this later.

It is working for me. Can you test on your side ?

Thanks in advance.

[Egleyser]

Hello friend,

Apparently ok, I click on the icon in the list and it is immediately selected. As a basis for comparison I took the default preview link (https://jmlemetayer.github.io/abba/previews/default/) and I can't even select anything from the list, it automatically selects the last item in the list. Once you submit the fix let me know and I'll test it again. For now, thanks for your attention!

[jmlemetayer]

Happy to hear that !

I will test another thing before updating the upstream project: Use the same mechanism but on the full row (and not just on one cell).

BTW I will not be able to update to 5.2.2 because there is an issue with the sketchy theme which have been resolved by this commit https://github.com/thomaspark/bootswatch/commit/ca48826d04b656cf23d90f440a751cf220928472 after the v5.2.2 tag. So I will wait until the next bootswatch release to do the update. Let's hope there will be a v5.2.2+1.

[Egleyser]

Very good, thanks for the support!

Let's wait then, as soon as it launches and I can let you know here, thank you. Hug!

[jmlemetayer]

Hi @Egleyser,

I tested expanding the link to the entire row. It works for me: https://jmlemetayer.github.io/abba-next/previews/default/ But if we believe the bootstrap bug mentioned above, it may not work for you. Can you test it ?

Once again, thank you very much for your help!

[Egleyser]

@jmlemetayer It didn't work for me.

[jmlemetayer]

Hi,

Ok, I was expecting that.

I have final solution, that I kept last, because it is less clean. But that should work.

I'll keep you updated.

[Egleyser]

OK awaiting!

[jmlemetayer]

Hi @Egleyser,

It took a while, but it seems to work this time. Can you confirm that it works?

Best regards.

[Egleyser]

Hi @jmlemetayer,

It worked, it worked fine 👍

[jmlemetayer]

Fixed :blush: !

Thanks everybody, and especially @Egleyser for your help.