search

triska / the-power-of-prolog

Introduction to modern Prolog
https://www.metalevel.at/prolog
1.21k stars 75 forks source link

Fix white-on-gray links on mousedown in Chrome #19

Closed unnoticeable closed 4 years ago

unnoticeable commented 4 years ago

When I right click a link to open in a new tab, I get white-on-gray styling, so I added another CSS selector with the same styling as hovered links.

triska commented 4 years ago

Thank you for your contribution!

Before merging this, I would like to able to reproduce this issue: When I right-click on a link as in your example, it is white on blue (instead of white on gray, as in your screenshot).

I tried it with the latest version of Chrome, 80.0.3987.122, on OSX. Which version are you using?

unnoticeable commented 4 years ago

I am using 80.0.3987.122 (Official Build) (64-bit) on Windows 10. However, looking at it more closely, you should hold the merge, because it's not correct. I think what I actually see on my screen is that

.toc-content a:hover, a:focus {
    background-color: #f1f1f1;
    text-decoration: underline;
}

from toc.css is affecting the the normal links outside of the toc as well because a:focus is missing a .toc-content in front of it. Combined with a:active (or a:hover) gets white-on-gray with underline as in the screenshot. You should be able to reproduce this if you hit tab a couple times to focus on different links in the normal text and then hover or click them.

triska commented 4 years ago

Ah yes, I can now reproduce it, using TAB.

Thank you for looking into this, please let me know when you find out how to best correct this, I will then merge your (updated) patch.

unnoticeable commented 4 years ago

Changed toc.css.

(Not sure if this is the correct way to remove the bad commit from a pull request.)

triska commented 4 years ago

Yes, this is definitely a good way to improve a pull request: Simply force-push to your forked repository; the pull-request will be automatically updated.

Thank you for working on this issue. However, with the current version of the patch, I see no difference between the original and the changed version of toc.css: In my case, when I press TAB to focus on different links, they only get a blue border (I previously thought that this would be the problem you wanted to correct). When I right-click or hover on them, then they get a blue (not gray) background.

I would like to be able to reproduce the effect of this patch. Could this be OS-dependent? Is there a way to see the effect of these different settings using the Chrome DOM inspector?

unnoticeable commented 4 years ago

It works the same on Linux too (and I don't have a Mac). Here, I booted up an Ubuntu partition. Firefox on left, Chrome on right: https://i.imgur.com/rQaJIAf.mp4

Full size video here because Imgur seems to cap res and GitHub doesn't seem to allow video unless it's zipped up first: linux-firefox-chrome.zip

triska commented 4 years ago

Perfect, thank you! I can reproduce this on Firefox, and I'm merging your patch!

Thank you again.