link hover causes jitter / reflow (0.1.0 regression)

[cjerdonek]

Version 0.1.0 introduced a regression where hovering over links will cause the text to jitter (and in some cases reflow entire paragraphs) because the link becomes bold, resulting in the text becoming wider.

This is due to this line of this commit from PR #9 (adding font-weight:bold to a:hover, a:focus): https://github.com/pages-themes/slate/commit/ef69e5aa955c115eeaa2b670d5c74ee79a4d89fc#diff-0c98b278830c5f885e539016b209473cR118

[cjerdonek]

You can see this, for example, by hovering over the links in the first paragraphs on this page: https://osvtac.github.io/recommendations/index

[advaith1]

Links becoming bold on hover is a feature, not a bug; however, it may be useful to make this something you can disable in config.yml.

[cjerdonek]

I understand that the bolding was meant to be a feature. But the bug is that the text reflows when bolding, which can make reading and focusing on words harder because the words can move to wildly different places in the document (in addition to jittering). The way I would hope it would work is that words become bold without affecting surrounding text.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[cjerdonek]

Adding a comment to keep this open. Also, the bot just marked this "wontfix." Is that true?

[StefanBrand]

This issue can indeed be annoying. There is a possible solution posted on Stack Overflow:

a::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

The idea is to reserve space for bolded (or any :hover state styles) content in :after pseudo element and using title tag as a source for content.

This would of course require all links to have a title attribute... Maybe the technique can still be used in a different way to get rid of the reflowing.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[cjerdonek]

Please leave it open, bot.

On Sat, Apr 21, 2018 at 1:40 PM stale[bot] notifications@github.com wrote:

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

—

You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/pages-themes/slate/issues/17#issuecomment-383328113, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVt7nYDUyRCFVeETc4blDk3gUj6pEIIks5tq5lVgaJpZM4Pn__Y .

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[cjerdonek]

Open.

[advaith1]

Wasn't this fixed in #20 though?

[cjerdonek]

How could subscribers to this issue have known? No one commented on this issue to let people know.

[advaith1]

Well I was looking at this issue and I saw

lhmouse referenced this issue on Mar 7 Merged _sass/jekyll-theme-slate.scss: Remove bold style of hyperlinks on hover. #20

[matkoniecz]

Yes, at least according to description of #20 it should fix this issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.