How to troubleshoot third-party cookie restrictions?
I recently noticed that news links in my personal project site have broken, and there are a few 3rd-party cookie restrictions/warnings that I hadn't noticed before (showing up in the developer console).
Basically, the React <Card.Link> href's no longer open to desired link. This happened without any changes to the code. The links worked fine a few days ago and suddenly stopped working. Each link also does not even appear to be a link when hovering over each news title with the cursor (shown in screenshot).
I have looked at Google's updated 3rd-party cookie restrictions, but I can't actually tell if that is what has broken my links. The links can be viewed here: omitted
Each href URL that is in the rendered page is still valid when manually copy/pasted into the URL bar of the browser. The React code also appears to be valid.
Replacing the React Card.Link tags with regular anchor tags does not fix the problem.
I am wondering if the 3rd-party cookie policy is what broke the site? I have also tried many browsers and different devices. The links stopped working completely.
I do have an Iframe in my site, but removing that does not fix the issue. I can see that Google Analytics is also highlighted in the third-party cookie-issues section of the developer console. Removing the Iframe and link to Google Analytics did not solve the broken links.
Enabling 3rd-party cookies in Privacy/Security settings also has no effect. How can I troubleshoot if the broken news links are related to 3rd-party cookies? Or possibly Google is somehow blocking me from using their news links?
Thank you for taking the time to look.
If the following is added to .card-body, the problem is resolved:
position: relative;
z-index: 2;
The reason the links are not clickable is because .card-img-overlay is absolutely positioned and is overlapping the card body (and so also the link) such that it is blocking it.
It's pretty much certain this was not sudden. If it was working before, the code has changed or you were looking at a different environment without realising.
- JavaScript Standard Style does not recognize Mocha
- How to do bitwise AND in javascript on variables that are longer than 32 bit?
- How to log JavaScript objects and arrays in winston as console.log does?
- jQuery prevent change for select
- Puppeteer - how to execute for loop synchronously
- Is there any way to set defaults in supertest?
- Nodejs AsyncLocalStorage getStore() return undefined
- React - Prevent Event Trigger on Parent From Child
- How do I convert this javascript into JSON
- Calendar Event Time Incorrect in Script despite Correct Formatting in Google Sheets
- JS Regex MatchAll with combination of Comma & Semicolon
- http://localhost/undefined 404 (Not Found)
- Validating an array's length against another array's length using joi
- Firestore React Js Increment Value by FieldValue without Google Cloud Function
- window.open from a https to http, and from https to http
- React and Tailwind Positioning an Item on Hover within DOM
- Uncaught TypeError: number 0 is not iterable (cannot read property Symbol(Symbol.iterator)) -> Material UI Error
- new Date().getFullYear() in React
- The number is not clearing up after submission even if other fields do clear up
- Date Milliseconds same for two dates
- Is it possible to only show half of a SVG icon?
- Smooth scrolling when clicking an anchor link
- Is it safe to resolve a promise multiple times?
- How can I use Axios with Server-sent events (SSE) in the browser?
- ServiceNow Printing lines from an array in an UI page
- What is the length of bcrypt hash output?
- Handling Audio blobs sent through mediarecorder in JS through python server script for azure service
- Updating javascript object property?
- How do I modify Stumbleupon URL's and provide a direct link to the content page?
- Conflict: Multiple assets emit to the same filename