Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

「評分(Rating)」在 Firefox 瀏覽器上似乎無法正常顯示顏色 :/ #924

Closed
Alpaca0x0 opened this issue Jul 25, 2023 · 3 comments
Assignees
Labels
🐛 已證實 Bug 非常確定是個 Bug。 🎨 CSS 與 CSS 和外觀設計上有關聯。
Milestone

Comments

@Alpaca0x0
Copy link

Alpaca0x0 commented Jul 25, 2023

image

加了顏色的也是無法顯示

image

但是半顆星的卻可以顯示

image

@YamiOdymel YamiOdymel self-assigned this Jul 25, 2023
@YamiOdymel YamiOdymel added 🐛 已證實 Bug 非常確定是個 Bug。 🎨 CSS 與 CSS 和外觀設計上有關聯。 labels Jul 25, 2023
@YamiOdymel
Copy link
Member

YamiOdymel commented Jul 25, 2023

找到 Bug 了,因為 Rating 有使用到 ":has()" 選擇器(而 Firefox 還沒支援),

那個 .is-active 的樣式剛好與 :has 整合在同個 Selector,所以 Firefox 直接拋棄掉整個條件。

.ts-rating :is(.star,.heart).is-active, .ts-rating.is-input :is(.star,.heart):checked,
.ts-rating.is-input :is(.star,.heart):has(~:is(.star,.heart):checked),
.ts-rating.is-input :is(.star,.heart):has(~:is(.star,.heart):hover),
.ts-rating.is-input :is(.star,.heart):hover

@YamiOdymel
Copy link
Member

YamiOdymel commented Jul 25, 2023

目前能做的修正就是把 .is-active 獨立出來自己一行條件,但你目前需要先用下列樣式修正

.ts-rating :is(.star,.heart).is-active,
.ts-rating.is-input :is(.star,.heart):checked {
    color: var(--color);
}

@YamiOdymel YamiOdymel added this to the Tocas 4.2.5 milestone Jul 25, 2023
@Alpaca0x0
Copy link
Author

暫時添加上這幾段 CSS,目前正常運作了,感謝您。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 已證實 Bug 非常確定是個 Bug。 🎨 CSS 與 CSS 和外觀設計上有關聯。
Projects
None yet
Development

No branches or pull requests

2 participants