CSS3 buggy hover/transition effect - html

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);
}

Related

Lost color on hover transition in Safari 13, is this a bug?

I found that under certain CSS conditions the color of a link will turn transparent on hover (and then remain transparent) in Safari 13 (which is the current version of Safari on older versions of macOS). I guess this is a bug, because it doesn't happen in Safari 14.
This is the combination of CSS rules that triggers this behaviour:
:root {
--my-color: color(display-p3 1 0 0);
}
* {
box-sizing: inherit;
}
a {
transition: all .15s linear;
color: var(--my-color);
}
a:hover {
text-decoration: none;
}
The color will change from color(display-p3 1 0 0) to rgba(0, 0, 0, 0) according to the web inspector in Safari 13.
I've created a CodePen and I guess my question is; can someone confirm this behaviour in Safari 13?
https://codepen.io/aetles/pen/WNRWeya
No, this is not a bug. Safari has certain limitations with HTML.
Rather than having color: var(--my-color) have color: #COLOR.
Safari is not as good with handling HTML, CSS and Javascript files as google, this may help.
If not, sorry, i have no answer.

Overlay effect works with mouse but not with keyboard

Here is my problem. I'm building portfolio page, and now I want to make it easy to navigate for people that can't use the mouse.
What does the outline property do? It provides visual feedback for
links that have "focus" when navigating a web document using the TAB
key (or equivalent). This is especially useful for folks who can't use
a mouse or have a visual impairment. If you remove the outline you are
making your site inaccessible to these people.
I built it so you can navigate all the links on my page using TAB key and you can open that link using ENTER key.
But...
I have nice visual effect with overlay. You can see images of apps, and only when you hover the mouse above that picture you can see links.
So TAB is working and you can select a link using keyboard but you can't see active links, because that overlay effect works only with the mouse (while mouse is hovering above particular picture).
It is hard to explain by words, so I recorded a short video:
https://youtu.be/IQbXL7iyG6w?t=5
Any idea how to fix this? Overlay effect should be tiggered by TAB navigation as well.
GitHub code:
https://github.com/elminsterrr/portfolio
You can do this with a simple jquery code. First change your css
CSS
change this:
#portfolio .inner-content:hover .overlay-content {
top: 0px;
z-index: 1;
background: rgba(0,0,0,0.9);
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}
with:
#portfolio .inner-content:hover .overlay-content {
top: 0px;
z-index: 1;
background: rgba(0,0,0,0.9);
}
#portfolio .inner-content .overlay-content.focus_test{
top: 0px;
z-index: 1;
background: rgba(0,0,0,0.9);
}
jQuery:
$('.overlay-content p a').focus(function(){
$(this).parents('.overlay-content').addClass('focus_test');
});
$('.overlay-content p a').blur(function(){
$(this).parents('.overlay-content').removeClass('focus_test');
});
You're showing your overlay on :hover when using TAB the elements get focused, so you have to add the :focus selector to your css for your overlay to show.
.my-class:hover .my-overlay { ... } => .my-class:focus .my-overlay, .my-class:hover .my-overlay { ... }

Hover Colour making Headers unreadable

I'm trying to achieve an effect like on this website, http://www.trask-industries.com/#/media, when the content is hovered over it a yellow colour consumes it and the colour of the header changes. When I attempted to re-create this effect my headers become unreadable. jsfiddle.net/m8Z25
.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover
{
background-color: white;
opacity: 0.30;
transition: .2s;
webkit-transition: .2s;
-webkit-transition: all 500ms ease;
}
h1:hover
{
color: black;
}
h2
{
color: red;
position:absolute;
bottom: -10;
padding-left: 30;
}
h1
{
color: black;
}
it is not 100% clear what you are trying to achieve here...
From what I can tell. it becomes nearly un-readable because you are adding opacity to the content container. This affects all content (including the background) so everything get faded.
It depends what you have behind the content containers (your sites background).
The site you demo-ed does not use the opacity to change anything. I imagine it just changes the background colour from a lighter purple to darker purple
try removing the opacity:0.30; and updating the background/text colours instead.
see This jsFiddle for an example of just changing colours vs using opacity...

IOS opacity transition not a nice effect

Making some simple animation using CSS and JS for UIWebView; testing and debugging with Chrome;
For animation using this style:
-webkit-transition: opacity 1s ease-out;
setting Opacity from 0 to 1;
Everything looks fine except the final state of animation, when last animated element () appears, a random block of text on the page gets a little bolder.
Already tried different solutions:
-webkit-backface-visibility: hidden;
-webkit-perspective: 1;
-webkit-font-smoothing: antialiased;
opacity: 0.999;
Nothing helps.
after reading other discussions about problems with animations, tryed to use this solutions:
.flick-fix
{
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
but this class should be applied to the element wich behavior is looks strange, instead of the animated object;

Link hover causes background-size: cover; to shift in 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;