I'm trying to work out why only the before and after elements are being rendered in the below example and how I would go about getting the span rendered as well.
The problem seems to only occur in Chrome, though I've only tested Opera, IE, Safari and Firefox as well.
Unfortunately as I'm not 100% sure why this is occurring I can't provide any further information.
http://jsfiddle.net/ddoticus/2egfkpu4/
dd {
max-height: 0px;
overflow: hidden;
transition: max-height 1.5s;
-webkit-transition: max-height 1.5s;
}
I believe the above code is the problem though.
If you open and close title 3 and then open it again it renders the span's background as white.
If anyone could explain a- why this is happening and b- an effective workaround that'd be very much appreciated.
This problem seems to have solved itself, it appears Google must have done an update or something as this, and the original problem I was having that this question was based on, has now been fixed.
If anyone can provide any explanation as to why this occurred that would be very much appreciated, but for now the problem has been resolved.
Related
I have one strange bug on my website. When i trying to transform block with text by using
transform: translateY(0px) translate3d(0,0,0) translateZ(0);
i got this block but with black (or white) stripes behind the text. I suppose in depends what background is - light or dark.
I can't attach the screenshot for example, so i leave a link.
Animated blocks - text block that appeared when you scroll the page.
This animation perfectly work in all browsers, but not in Firefox (windows ver.).
Maybe someone saw this and could help...
Thanks!
I solved my problem by setting
outline: 1px solid transparent;
property for each animated block on the page. It was helpful.
I found this solution in this answer.
This might be a result of a bug that I have encountered. There are still quite a few of optimization problems when it comes to transitions, in any browser, but particularly Firefox.
Have you tried setting perspective: 1000; to the parent element? It's served as a quick fix to some of these problems.
Nice website, by the way!
I'm working on my new online portfolio at http://asbjorn.org/ny/, and I've come across the weirdest issue!
Every time you open the page for the first time, the next and previous buttons for the slideshow don't appear. If I open the inspector, they pop up immediately, and they also appear when reloading the page.
They're pretty standard html elements, not added dynamically, so I have NO clue as to why this happens! Of course I can't have the site visitors reload the page just to see them. :/
I really hope someone can help me! :)
update: seems like it's a chrome only issue. For me it happens consistently in chrome on both Win7 and OSX. A few of my friends also has the same issue (probably in chrome on osx)
So I'll take a stab at an answer. When I see the problem in Chrome 22, and I bring up the inspector, I note that the #previousLink and #nextLink divs have a width of 0 in the broken state. Try setting an explicit width for these in your CSS, or make the nested image use display: block.
#previousLink { width: 31px; }
#nextLink { width: 37px; }
or
#previousLink img,
#nextLink img { display: block; }
I think the combination of these inline items and your overflow: hidden rule are biting you. I think. This is a tricky bug!
I have an unordered list with image links and when you hover over them they fade out a little bit and this shows all good in every browser except IE, of course. At first I thought it was just a png bug but after applying both of those fixes it still doesn't work. The page is at:
The page.
If anyone knows what is going on please let me know as I am completely stumped now. Thanks
It appears to work in IE7 and IE9, but not IE8. Interested, never seen that before.
Anyway, you can fix the problem by using a different method. Instead of using a list, just have your images (with links) inside the containing <div>, then apply a style to the links such that they have display: inline-block; - this will allow you to align them vertically with each other (vertical-align: middle;) and set their width if you want.
The opacity fade is being achieved by styles that IE doesn't support
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
It works in IE9 so first guess is you are using some css or javascript that isn't supported for earlier versions. You need to post the code so we can give you better guidance on how to resolve this.
I am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering.
Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I cannot nail the problem down either, on one site it may be unique to Safari, on another it may only happen in Chrome, on another it's perfectly fine.
Wish I had more information, but maybe someone else has run into a similar problem.
.swatch {
-webkit-box-shadow: #EFEFEF 2px 2px 0px;
-webkit-transform: scale(1);
-webkit-transition-duration: 0.2s;
border: 1px solid white;
position: relative;
z-index: 1;
.swatch:hover {
position:relative;
z-index:10;
transition-duration: 0.2s;
transform:scale(1.8);
-webkit-transition-duration: 0.2s;
-webkit-transform:scale(1.8);
}
It also seems that the problem is remedied when removing any z-index attributes, but then the hover swatch is behind the other swatches; which does not work for this project.
Any thoughts are appreciated.
I've had success adding
-webkit-backface-visibility: hidden;
to the offending element (.swatch in your case).
However, test it in older versions of Chrome and Safari to make sure it doesn't break anything else. In my experience, Safari 4 specifically isn't a big fan.
I had the same problem at this morning. But I found an answer on the web few moments ago.
To prevent the Blink issue, put the follow property on your .swatch class (not on :hover):
-webkit-transform-style: preserve-3d;
Try changing position:relative to position:absolute, and/or specify position attributes (top: x, left: y.
No idea if it will work, just throwing it out there.
when mouse over the images(img:hover) in chrome works fine. you can use like this
.swatch img:hover
http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/
I had the same problem try using opacity instead of z-index
img:hover{
opacity: 0;
}
On a different subject, I had the same effect (the awfull blink).
However, it wasn't on hover principles. It was on a dragable area, I wanted as smooth as possible on iPad. The area was originally moved with a css margin-left property.
Then, I used -webkit-transform':'translate3d(X, Y, Z)' for the smooth rendering, which is the case.
BUT, the use of translated3d made the famous blink, on the first drag (on iPad only).
Thanks to Fábio ZC, the -webkit-transform-style: preserve-3d; worked perfectly to get rid of the blink
For those who wants to know more about the -webkit-transform-style: preserve-3d and what is involved.
Back to the original problem, these are my thoughts:
You mention Safari & Chrome (so, webkit). Is the problem only on those browser? Which would lead to -webkit suspicious properties.
If so, -webkit-backface-visibility: hidden; or -webkit-transform-style: preserve-3d; are still good candidates to be tried:
Did you attach them on the .swatch class? (not hover state, otherwise, they will be considered too late, as the animation will be played directly)
You stated that the whole page is blinking? Strange as only the swatches should be impacted.
I deleted this line from the hovering class:
"display: none;" and amazingly, that worked. Try it and hope it solves your problem.
First of all, I've looked at this previous question but sadly it didn't seem to offer any solutions (other than JS which is a non-starter I'm afraid)
I've got some skip links at the top of my page...
<ul>
<li class="skip-link"><span>Skip to main content</span></li>
<li class="skip-link"><span>Skip to main navigation</span></li>
</ul>
and further down there is...
<div id="mainContent"></div>
which is an empty div purely there to act as an anchor point.
Everything seems to work fine when the link is activated; visually the page jumps down, and focus shifts to the first link after #mainContent.
However in Chrome (v 12.0.742.91), whilst the page visually shifts down, the focus does not, meaning that after activating the accesskey, tabbing again merely jumps you back up to the top of the page and back into the access links.
I had an identical issue with IE which was put down to a known quirk and was fixed by setting a specific width to the target element. However, that doesn't seem to work for Chrome. I have also tried adding a tab-able element into #mainContent div, putting any sort of content in the #mainContent div, as well as all sorts of float/width/height variations and nothing seems to fix it.
Has anyone had any similar issues with Chrome or knows a fix?
Thanks in advance folks
Simon
The best you can do until someone find a trick/hack is starring this issue which succeeded this one.
Your SO fellows will probably do the same because they care.
Apparently, it has finally been fixed.
I know this is an old question, but I finally stumbled across it today after searching for hours. I still haven't found a non-js solution to this, and though the issue is marked as fixed in Chrome, it still exhibits the same behavior. For a lack of anything else, I used jQuery. Rather than an inline script, I used an unobtrusive event listener.
The HTML:
<div id="skiptocontent">
Skip to Main Content
</div>
<div id="mainContent"></div>
The jQuery:
$(document).ready(function () {
$("#skipper").click(function () {
$('#mainContent').attr('tabIndex', -1).focus();
});
});
I also hide the link unless it receives focus from the keyboard. That way only keyboard users and screen readers will ever know the link is there. Using CSS3, you can ensure that it becomes briefly visible if a user tabs rapidly past it.
The CSS:
#skiptocontent a {
position: absolute;
top:-40px;
left:0px;
background:transparent;
-webkit-transition: top 1s ease-out, background 1s linear;
transition: top 1s ease-out, background 1s linear;
z-index: 100
}
#skiptocontent a:focus {
position:absolute;
left:0px;
top:0px;
background:#F1B82D;
-webkit-transition: top .1s ease-in, background .5s linear;
transition: top .1s ease-in, background .5s linear
}
For a demonstration, you can view the fiddle. If anyone has a way around the use of javascript, I would love to hear it. I don't think a solution is truly accessible if it requires js.
I came across this issue too and the only way I could find to fix it was with JavaScript (and jQuery).
So on the link I used an onClick $('#mainContent').attr('tabIndex',-1).focus();
"Adding the tabindex value of -1 to the div makes that div
programmatically focusable, allowing it to take the focus when the
.focus() method is used." -- Via: http://webstandardssherpa.com/reviews/overlays-and-lightboxes-keys-to-success/
See the fiddle:
http://jsfiddle.net/PEDaS/1/
Took the snippets above and tried generalizing them to target any potential skip link.
jQuery('[href^="#"][href!="#"]').click(function() {
jQuery(jQuery(this).attr('href')).attr('tabIndex', -1).focus();
});