group-visited doesn't work in Safari and mobile browsers

[Leoyang0717]

What version of Tailwind CSS are you using?

v4.0.0

What browser are you using?

This bug appears on Safari and mobile but not in Chrome.

Chrome it's work

Safari

Chrome & Safari mobile

Reproduction URL

https://play.tailwindcss.com/TTbwnIDE64

Describe your issue

When upgrading from v3.4.17 to v4.0.0, I encountered an issue on Safari and mobile devices where the visited state does not change the color as expected.

I suspect that :is or :where combined with :visited might not be compatible with Safari or mobile browsers or is it actually not recommended to use group-visited?

v4.0.0 compile result, doesn't work!
.group-visited\:text-red-600 {
  &:is(:where(.group):visited *) {
    color: var(--color-red-600) /* oklch(0.577 0.245 27.325) */;
  }
}

v3.4.17 compile result, work!
.group:visited .group-visited\:text-red-600 {
  color: rgb(220 38 38 ) /* #dc2626 */;
}

[davidwebca]

I stumbled into this too. Considering that the same :is(:where()) kind of selector gets generated for :hover too and that it works (https://play.tailwindcss.com/fMi98ljsf2), I'm thinking maybe it is a :visited security concern in the webkit team. These links offer a brief historical explanation of why :visited is different and lies in computedStyles and could offer a reason why the selector doesn't work (yet?).

https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/

[RobinMalfait]

Hey!

Going to close this as a duplicate of https://github.com/tailwindlabs/tailwindcss/issues/16418

While the :is and :where do have an influence on specificity, it's the nested syntax in combination with :visited that is the issue right now. This is a browser bug because :visited has some special casing in some browsers for security.