colinlienard / githundred

⭐️ Top 100 most starred GitHub repositories

GitHundred

A list of the top 100 most starred GitHub repositories, updated daily.

Made with

• Nuxt with ISR
• Vue and TypeScript
• TailwindCSS

License

MIT © Colin Lienard

githundred's Issues

Unable to click on repository links on iOS 17 and MacOS Safari 17.4.1

I first browsed the site on my iPhone and thought there weren't any links. Then, I proceeded to open the same site on my macbook from Safari. When I looked at this repo's code I finally noticed there was already a link. So, I tried opening the site in a Chromium browser and it works as expected.

The anchor tag exists even in Safari so I'm not sure why the element is not recognised as a link and is not clickable. but something's wrong with Safari's CSS so the table head is blocking the interaction with the anchor tag.

In the image below, I'm hovering over the table body row with the dev tool inspector but it selects the table head instead.

EDIT: The issue seems to stem from these two absolute positioned content blocking the link interaction

githundred/pages/index.vue

Line 128 in 92abe5e

:class="`sticky top-0 z-10 table-header-group border-solid after:absolute after:inset-0 after:border-b after:border-slate-300 after:transition-shadow after:content-[''] ${hasScrolled && 'after:shadow-[0_1rem_1rem_-1.5rem_#94a3b8]'}`"

githundred/pages/index.vue

Lines 145 to 152 in 92abe5e

	<div
	class="absolute h-10 w-full bg-white transition-all"
	:style="{
	height: `${hoverEffect.height}px`,
	top: `${hoverEffect.top}px`,
	opacity: hoverEffect.opacity,
	}"
	/>