Link hover causes background-size: cover; to shift in Chrome - google-chrome

Using CSS3, I have set a background image as a cover. Upon first loading the page in Chrome and hovering over a link, the background around the text shifts slightly (but quite noticeably). I am using a transition for the hover, but the background shift also happens with the transition removed.
My guess is that the background is resizing during hover, but I'm not sure how to keep this from happening. Once it has shifted, you can rollover other links without any problem. After refreshing the page, the problem persists.
Website is here: http://tylerbritt.com/
Styling is as such:
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 is very similar to: Background shift in Google Chrome when opacity changes on hover; jfriend00's advice was helpful, but my problem differs because it is purely a text link and not an img.
I'm on Chrome Version 19.0.1084.52. The problem does not exist is Safari. Any advice would be greatly appreciated.

Hey I have noticed the exact same issue. Definitely a chrome thing. Below is an issue I submitted to the chromium 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
Overlaying element (tested with div and a tags) that has a hover effect
For best results, use in a large view port, where the bg image is stretched a lot, and the abbarations are most evident
What is the expected result?
When using a activating a hover effect (like underline, margin change, etc.) the background image should stay consistent (and does on all other browsers tested so far)
What happens instead?
When the hover effect is activated with mouse, the background image warps oddly. In the area around the element, the bg image shits a few pixels.
Please provide any additional information below. Attach a screenshot if
possible.
In the JSFiddle linked above, which uses an ul/li as the example. we determined that changing the ul's display to inline-block corrected the issue.
IMPORTANT: It's super subtle, so you might have to sweep your mouse across the relevant elements a couple times before you notice
UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1

Might be a bug, I don't know if this will work but try background-attachment: fixed;

Related

CSS3 buggy hover/transition effect

I'm having a problem with hovering over links on my site. Note: I'm using white font on black background. I have several links--just typical
Click here
My css:
.ext_link {transition:0.5s; -webkit-transition:0.5s;}
.ext_link:hover {color:rgba(125, 249, 255, 1); opacity:0.75;}
When I hover over one of these links, the animation happens supper chunkily--it looks like
the link starts going grey for a second, then suddenly turns that blue color without any transition. Then, when I take the mouse off, the process happens in reverse. The link abruptly turns grey and then fades back to its original white color.
This is a new bug--my site was working fine up until two days ago. Also note that this bug only happens on MY computer. When I access my site on anyone else's computer, the animation is working just fine.
I've tried clearing the cache, restarting the browser, etc.
I think now it's OK:
check this [ LINK ]
I don't see anything wrong here but sometimes for accelerating your transition you may add transform: translateZ(0) with venders to your element.
body {
background: black;
}
.ext_link {
font-size: 5em;
color: white;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ext_link:hover {
color:rgba(125, 249, 255, .75);
}

Background-size issue in IE and Google Chrome

I am using background-size on Chrome and found out it is CSS3 which is not supported in old versions of IE. Hence I have gone through some posts and someone recommended to use this filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader
HTML:
<span class="num_blue_small small"><span class="numberText">4</span></span>
CSS:
.num_blue_small
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/images/num_blue_small.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/num_blue_small.png', sizingMethod='scale')";
}
.small
{
display: inline-block;
height: 35px;
width: 35px;
text-align: center;
vertical-align: middle;
line-height: 35px;
}
.numberText
{
color: White;
}
By implementing the "filter", it works perfectly in IE7; however, it turns invisible in Google Chrome.
If I include background: url(/images/num_blue_ssc.png) no-repeat; in .num_blue_small CSS class, it will work fine in Chrome but IE 7 will show 2 same images with different sizes.
What should I do to get it fixed?
you could try the background-size polyfill
An IE behavior adding support for background-size to IE8. of Louis Remi
Progressive Enhancement is the mantra I live by. It means "Have fun
with CSS3 and don't worry about IE8 users; they'll never notice
they're missing out on your gorgeous text-shadows and gradients,
anyway".
All was well until I discovered the elegance of background-size:
cover; and background-size: contain;. The first one, for instance,
allows an image to completely cover a background, without having to
send a 1920x1080 background image down the pipes.
Unfortunately, they don't degrade gracefully: websites would likely
appear broken to IE8 users
They offer that feature:
correct position and size of the background image
updated position and size on browser resize
updated image, position and size when the background-image is modified
but seems they have some limitation:
multiple backgrounds (although the :after trick can still be used)
4 values syntax of background-position
any repeat value in background-repeat
non-default values of background-[clip/origin/attachment/scroll]
resizing the background when the dimensions of the element change

background-image not showing in div normally or on hover

Ok guys, I have this in the style.css of my website.
.asia{
margin-left:40px;
background-image:url('../resources/img/asia.jpg');
width:100px;
height:75px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.asia:hover{
background-image:url('../resources/img/asia2.png');
width:100px;
height:75px;
}
these are two images, that I will use on my homepage by putting
<div class="asia"></div>
and everything is set for them to show up like an animation when hovering over.
The only problem is that on the laptop everything works fine, the index.html shows me all the images and the hover efect works well but when uploading and testing it on the server the images do not show up.
What is the problem? What am I doing wrong?
Could I make a suggestion, instead of having two files, perhaps combine them into one image.
Then, on hover you can update the background-position. This way, your document won't need to request another file from the server (good for people on mobile, and conserving downloads) as well as preventing a 'flicker' while the page hangs without its file and loads it in. Here's an example of the implementation.
.imageContainer {
background: url('../resources/img/asiacombined.jpg') no-repeat 0 0;
}
Let's assume the image is 100px tall.
.imageContainer:hover {
background-position: 50px /*x axis, shifting to the top of the next image in the file*/ 0 /* Y axis */;
}
Hopefully this helps.
Ps.
You can also use top, left, right, center, bottom to align content.

Browser CSS transform vertical from cube flip

I need some help with a 3d tranform. The transform is on the a:hover event and uses a:hover and a:before pseudo element to be transformed into a vertical flip, it's like a crad filp but it starts the flip at the base line of the menu, it should look like a cube flipping upwards. Here is the code on code codepen Please try and get this to work in Webkit and Mozilla and of course IE, please see what you can do.
the example i have is limited but it does work in FireFox and no other browsers so this would be better tested in IE and chrome first.example
PS. The pink a:before elements need to be transformed on a flat perpective surface at the bottom of the A tag and the a:before tag should animate upwards in place of the hovered anchor tag (-90deg I think), when it animate the pink tag shown in place of the first tag
You should post code rather than links. However, from your codepen I can tell you're not using vendor prefixes to support multiple browsers.
When you use transition, transform, etc you should write
-webkit-transition: all .3s;
-mos-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
See this SO question: Does Internet Explorer support CSS transitions?

How to make images move automatically + on mouseover in CSS/HTML?

How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/