CODEWITHSUNDEEP
javascriptcssreactjsgoogle-chromefirefox
SepSol
SepSol

Reputation: 113

Why link components render outside the page on Chrome but are ok on Firefox?

I have some link components in my React web application that should only be displayed when the user hovers over a certain element on the webpage. The website (sepsol.github.io) loads fine on Firefox, but when I try to load it on Chrome I don't see my link components. I inspected the page and if you look closely, you see that the elements are outside the page.

Here's the problem in action:

enter image description here

LEFT: Chrome | RIGHT: Firefox

--

React Code:

I don't know where the problem lies, so I'm unable to put any specific code snippet here. I'll link my whole React repository instead: https://github.com/sepsol/sepsol.github.io/tree/react-code

Upvotes: 1

Views: 94

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19119

The container around those links is absolutely positioned and is looking to find the nearest parent to position itself. Firefox is using an implicit parent rule giving you the result you want, while Chrome needs the parent to be explicitly defined. What you need is to declare work-card-container as a parent. Then, the absolute positioning of the link container will be within the bounds of this newly defined parent.

Add the following:

.work-card-container {
  position: relative;
}

enter image description here

Upvotes: 2

Related Questions