| SBisson | |
| Apr 25 2024, 2:45 PM |
| F54557826: T363481_WordPress_WPLink.webm | |
| Tue, May 28, 7:17 PM |
| F51062267: 2024-05-08_09-33-05.png | |
| May 8 2024, 4:35 PM |
| F50793570: T363481_Wikipreview_Safari1.webm | |
| May 7 2024, 9:41 PM |
| F50793531: T363481_Wikipreview_FF1.webm | |
| May 7 2024, 9:41 PM |
| F50793511: T363481_Wikipreview_Chrome1.webm | |
| May 7 2024, 9:41 PM |
By default, elements with a preview attached to them have a dotted underline. This is implemented using a pseudo element (::after).
The following issues have been found to be likely due to this implementation:
Task Description:
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T363481#9839649 |
@eamedina Please review the issues below on Firefox and Safari.
Status: ❌ FAIL
Environment: WordPress Dev- b1e2bf44d74ca3cc3bbd5097f030681466026c60, Wed May 1 10:39:41 2024 -0400; Wikipreview: 1.10.0; Commit: d4cbaf60aaef02c00441354c9a3704a6c921410f, Tue May 7 21:44:02 2024 +0800
OS: macOS Sonoma 14.4.1
Browser: Chrome 124, Firefox 125, Safari 17.4.1
Skins. N/A
Device: MBA M2
Emulated Device:: n/a
Test Links:
http://dev-test.local/philadelphia-eagles-test/
❌ AC1: https://phabricator.wikimedia.org/T352491
| ✅Chrome- Ok |
| ❌ Firefox- Some "Read more preview" are light and some are dark |
| ❌ Safari- Wikipreivew line doesn't go all the way between "four" and "Super" |
Also adding the Wikipedia preview arrow is light in dark mode as seen in the screenshot below which @hueitan noticed.
Firefox- Some "Read more preview" are light and some are dark
This is because "Read more preview" is a link and it seems sometimes that div itself gets focused when rendering the preview. Note the blue border around the div, if you click anywhere on the preview text, the focus is removed from the div (and becomes more readable on dark mode). This is not specific to Firefox only, I can see it on Chrome too. This behavior is not related to the scope of this ticket, so I propose we handle it somewhere else more relevant, perhaps a new ticket, or perhaps T360752 may be a good place as that ticket touches on that "Read more preview" div. @SGautam_WMF @SBisson thoughts on whether it makes sense to include this in T360752 or create a new ticket? Do you see this as an issue at all? ...actually never mind, I just went ahead and created a new ticket (T365502) just to allow this T363481 to move on and keep things tidy, thanks
Safari- Wikipreivew line doesn't go all the way between "four" and "Super"
I am not able to replicate this exact style rendering, but this seems to be a quirk from Safari (we noticed the new text-decoration styling was buggy in Safari first, for example, and had to include -webkit rules for Safari support). In any case, I don't think this is an issue
Also adding the Wikipedia preview arrow is light in dark mode as seen in the screenshot below which hueitan noticed.
This is better suited for T345056, will add a followup PR to that ticket, thanks
@eamedina based on the information below and issues that are not task-related, I will move this to sign-off. Thanks for the explanation and all your work!
Status: ✅PASS
Environment: WordPress Dev- 5193fb674a2a832554e16e4c28d59dbc4137c947, Tue May 21 12:46:20 2024 -0400; Wikipreview: 1.10.0; Commit: a82469da57aae3496c7096102f6748635dc0796a, Thu May 23 10:31:33 2024 -0400
OS: macOS Sonoma 14.5
Browser: Chrome 125, Firefox 125, Safari 17.5
Skins. N/A
Device: MBA M2
Emulated Device:: n/a
Test Links:
http://dev-test.local/philadelphia-eagles-test/
✅AC1: https://phabricator.wikimedia.org/T352491
❌ Firefox- Some "Read more preview" are light and some are dark
The task was created T365502
❌ Safari- Wikipreivew line doesn't go all the way between "four" and "Super"
I'm still getting it for some reason in Safari only but when I did things similar to that one, it was fine. Not sure why it's only those specific words within the same article but it looks to be a one-off for whatever reason that is.
Also adding the Wikipedia preview arrow is light in dark mode as seen in the screenshot below which hueitan noticed.
The task was created T345056