All geek questions in one place

Link hover calls background size: cover; go to Chrome

Using CSS3, I set the background image as a cover. When you first load a page in Chrome and freeze by reference, the background around the text shifts slightly (but quite noticeably). I use the transition to hang, but the background shift also occurs when the transition is removed.

My guess is that the background changes during the freeze, but I'm not sure how to avoid this. Once it has shifted, you can knock over other links without any problems. After refreshing the page, the problem persists.

The website is here: http://tylerbritt.com/

The styling is as follows:

body{ text-align: center; margin: 0 auto; color: white; font: bold 80pt 'Economica', sans-serif; background: url(bg2.jpg) no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } a { color: white; text-decoration: none; -webkit-transition: text-shadow 0.3s ease-out; -moz-transition: text-shadow 0.3s ease-out; -o-transition: text-shadow 0.3s ease-out; -ms-transition: text-shadow 0.3s ease-out; transition: text-shadow 0.3s ease-out; } a:hover { text-shadow: 0 0 6px #1c00f6; }

My problems are very similar to: Background shift in Google Chrome when changing transparency on hover ; The jfriend00 tip was useful, but my problem is that it is a purely text link, not img.

I am in Chrome version 19.0.1084.52. The problem is not that of Safari. Any advice would be greatly appreciated.

+6
source share
2 answers

Hey, I noticed the same problem. Definitely a chrome thing. Below issue I submitted a chrome project:

 Chrome Version : 21.0.1180.89 OS Version: 6.1 (Windows 7, Windows Server 2008 R2) URLs (if applicable): http://jsfiddle.net/9vvy6/62/ http://castlelaw-kc.fosterwebmarketing.com/ Other browsers tested: Add OK or FAIL after other browsers where you have tested this issue: Safari 5/6:OK Firefox 14.0.1:OK IE 9:OK Chrome:FAIL

What steps will reproduce the problem?

  • Background Image with Background Size: Cover
  • An overlaying element (checked with divs and tags) that has a hover effect
  • For best results, use the large viewport where the bg image is stretched a lot and the abbrations are most obvious.

What is the expected result?

When using the activation of the hover effect (for example, underlining, changing the field, etc.), the background image should remain consistent (and on all other tested browsers so far)

What happens instead?

When the hover effect is activated by the mouse, the background image is distorted strangely. The bg image occupies several pixels in the area around the element.

Provide any additional information below. Attach a screenshot if possible.

In the above JSFiddle, which uses the ul / li example. we decided that changing the ul mapping to an inline block fixed the problem.

IMPORTANT: it is very thin, so you may have to move the mouse pointer over the corresponding elements a couple of times before you notice

UserAgentString: Mozilla / 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.1 (KHTML, e.g. Gecko) Chrome / 21.0.1180.89 Safari / 537.1

+3
source

There may be a mistake, I do not know if this will work, but try background-attachment: fixed;

0
source

Source: https://habr.com/ru/post/917266/

More articles:


All Articles