Hi there I am working on this site - http://smudgedigital.com/animation-projects/ and have an issue with the gallery on the projects page. The images should all be a circle and when rolled over the the image should remain a circle and have a hover black state.
However despite the site working fine I have recently noticed that the circles are no longer circles in google chrome. The are in fact square on all states.
I have looked through this site to find any answers but none of them seem to work. I have tried using the border radius code for all browsers;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
but it does not seem to pick it up, even when I use the !important tag. I have also tried using pixels instead of percent. When I use the inspect element tool I can add this;
.view img {
display: block;
position: relative;
border-radius: 100%;
}
and it works on the normal state, but when I put it into my site css it does not appear.
I have seen some people say that google just doesnt understand the overflow: hidden property and it has nothing to do with the border radius, however overflow: hidden does appear.
Any help would be greatly appreciated. I have built the site on wordpress.
Thanks,
This looks to be a known bug in Chrome I'm afraid. It's related to transition mainly, and how the order of parent/child becomes when the DOM is being painted during a transition:
https://code.google.com/p/chromium/issues/detail?id=157218
As an alternative you could maybe make the entire circle including border and shadow increase in size. However I don't think that is the effect you want.
Please also see this thread on Stack Overflow: Bug with transform: scale and overflow: hidden in Chrome
Added
.view-first img {
transition: all 0.2s linear;
border-radius: 100%; /* added new */
}
removed
.view{
overflow:hidden; /* removed */
}
Related
I am trying to apply a filter on the entire webpage for creating an inverted view of the page. The page has fixed-positioned elements (some buttons and block). So the easiest way is to invert the color of each element on the webpage, including fixed position buttons. To invert the colors I use the following css code:
html {
filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
}
This works fine in chrome, but not in firefox. The inverting works but it changes the position of two buttons that are defined as follows:
#topbtn {
display: none;
position: fixed;
width: 40px;
height: 40px;
overflow: hidden;
outline:none;
bottom: 20px;
right: 20px;
z-index: 99;
}
I have tried to change the filters but no luck. No error is shown. I know this may be duplicate of similar issues in Firefox. But, the other questions are mostly to deal with some div or some element inside another element.
IMO, this question is different as the filter applies to the entire page and I don't want to apply the filter to each element one-by-one too naive.
I hope someone has already encountered and solved the problem for Firefox (especially the dark mode theme guys).
The following CSS, applied to an <a> and a <div> residing in individual <tr>▶<td> elements in a <table> (with border-collapse and td { padding: 0px; } set), works as expected:
a {
background-image: url("http://ibin.co/19rwR69EOigr");
height: 100px;
width: 120px;
display: block;
}
div {
width: 200px;
box-shadow: #000 0px 0px 13px;
}
If I apply any opacity to the <a>, the browser's internal layering seems to break horribly.
Note that the test picture's last pixel sits within the <div>'s box-shadow, even in the first example. (And it says opacity = ".99", if you can't see it in the image >.>)
Is this possibly a rendering bug that's managed to creep into both Firefox and Chrome? :P
See what opens and shuts in this JSFiddle.
Thanks in advance!
Quite Simple.
Thank you for clean formatting.
Change opaque ID to this:
#opaque {
opacity: .99;
z-index:-10;
position:relative;
}
http://jsfiddle.net/SinisterSystems/GbAYU/3/
What is happening is whenever opacity is set, the back-end method of CSS3 to interpret it throws some pretty wild z-index's.
Just set it to stack behind the other elements and all will work fine for you.
position:relative; - Cause otherwise it wouldn't accept your z-index property.
z-index:-10; - So that it places it behind the z-index of 0 of your other objects.
EDIT:
The default value of HTML elements does not support static as an object that z-index will apply to, hence the position declaration.
And it totally does with absolute, fixed, relative, or inherit, but not static.
I am creating a slider with custom "prev/next" navigation-arrows.
All the animations works fine. I use the transform: scale() to scale up the arrows when hovering and it all works fine. I just have one problem..
I want to prevent the arrow images to scale too.
I think I have tried everything: I've used somekind of :before/:after (see below) and it worked pretty good. But not in Safari (No transition when hover).
http://jsfiddle.net/XF4Qj/5/
Then I tried something else: Putting a span inside the arrow container, and when the arrow container was scaled up, the span was scaled down, but it didn't looked good at all (See below).
http://jsfiddle.net/Ajngc/1/
I have tried for hours, but I cannot get it to work in all major browsers.
So the question is: How to I prevent the arrow-images from scaling too, and just preserve their original dimensions?
It's only the white circle that schould be scaled up, and not the background image.
I've created a third fiddle, which has all the working code from my slider-arrow-functions:
http://jsfiddle.net/Ajngc/2/
Could be really great if someone could help me with this.
Thank you very much
- Jesper
Instead of transform()ing those elements, why not just change the size? See this updated fiddle.
.arrow:hover {
width: 50px;
height: 50px;
top: -5px;
bottom: -5px;
}
.prev:hover {
left: 35px;
}
.next:hover {
right: 35px;
}
I have a website: parisforaweekend.com with a 'subscribe' button-image that changes color on mouseover. Both images are part of the same image sprite.
Still in Chrome (v. 15) I'm getting very noticeable, but irregular occurring, flickering on mouse-over. How on earth is this possible? Also tested on IE8 and FF6 which don't appear to have the problem. It annoys me a lot.
I guess the general question is has anybody seen something like this before? Anything that can explain this weird behavior?
Although I can't see what possible use it is I included the relevant css-snippet:
CSS
EDIT: changed order of css rules to reflect real situation (although I can't see that making a difference)
#mc_embed_signup input.button {
display: inline-block;
width: 100px;
margin: -1px 0 10px 15px;
padding: 0;
border: 0 none;
cursor: pointer;
background: url('http://static.parisforaweekend.com/img/s.jpg') 0 0;
line-height: 32px;
}
#mc_embed_signup input.button:hover {
background: url('http://static.parisforaweekend.com/img/s.jpg') -101px 0;
}
HTML
<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button">
EDIT: perhaps it has to do with the fact that I'm using S3 + cloudfront (Amazon's CDN). Not caching correctly (on Edge-location or on client) and doing 2 requests or something. Hmm, still pretty unlikely.
Have you tried using background-position instead of background?
I'm not seeing the problem you mentioned either, but it may be something to do with essentially redefining the background image on hover.
a.btndownload{background-image:url(../images/btn-download-sprite.gif); background-position:left top; background-repeat:no-repeat; display:block;}
a.btndownload:link{background-position: left top;}
a.btndownload:visited{background-position: left top;}
a.btndownload:hover{background-position: 0px -34px;}
a.btndownload:active{background-position: bottom left;}
Above is the sample code that solves the image flickering problem when using image sprite.
DO NOT OVERWRITE IMAGE URL again and again, even if it's same as the first one.
OTHERWISE it'd give Chrome false signal to load the same image over and over.
This problem emerges on Chrome 18 again. Other browsers like IE 9 and Firefox are fine.
When the page loads the first background image is loaded automatically. When you then mouse over it has to then retrieve the second image causing a slight delay. The irregularity you mention is then based on caching. If the image is cached then you wont get a flicker.
To resolve have the images side by side in the same .jpg. Then use the background-position to set the image you want.
The image will no longer have to be retrieved and this will prevent your flicker.
I don't know why the flicker occurs on Chrome but you should not set background image url for hover pseudo class, only change the background position. Please try this
#mc_embed_signup input.button:hover {
background-position: -101px 0;
}
I found this question by Googling for the same problem on my site. Given the timing (this was asked yesterday), I would assume that this a new bug that a recent Chrome version introduced in the caching mechanism.
As mentioned in other answers, removing the background-image from other images should resolve the issue. I'm using Smart Sprites to generate the sprites, so I can't easily remove it (it gets inserted automatically), but I think I'll have to write a post-build script to do it, I don't see another solution.
I just ran into the same issue. But in my case it was caused by some other rule. Setting the CSS3 transition to 0 did the trick:
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
I don't know how it has occurred and for the life of me, I cannot fix it.
I have a div which is hidden using display: none;
When a user clicks, I set display: block which shows a new layer.
The problem is that all the text is showing through from the layer behind it... How do I force no transparency from a div behind?
I have set no transparency or opacity in my css.
The layer I am showing only has the following settings:
.display {
background: rgb(255, 255, 255) url(/template/mobile/images/dot.gif) repeat left top;
display:none;
width: 250px;
height:100px;
border: 1px solid rgb(20, 20, 20);
margin-left: -5px;
margin-top: -100px;
float: left;
z-index: 999;
}
As you can see:
I've tried using a 1px background image - still transparent
I've set the background color to white - still transparent
I've tried setting the z-index so it is on top of everything - still transparent
I don't know why it is and how i stop it???
NOTE: I have deactivated the live site and this code can be viewed in testing at: http://dev.cutmyhair.com.au/search_results.php?keyword=waverley
NOTE: This issue is only occurring on the .mobi version of the site (so you need to view it on a mobile phone OR using a mobi emulator)
I was able to reproduce this using FF3 and IE8.
You need to set position to either absolute or relative.
.display {
position: absolute;
...
}
or
.display {
position: relative;
...
}
Are you sure it's a transparency issue? I see another problem:
height:100px
margin-top: -100px
This two together would make your div stay totally out of the page, if the float property is influenced by other elements around. Maybe post here the html portion and other related css rules, so I can understand the situation better. Anyway, first of all, be sure that your div is in the place you think it is, by using a good html/css debugging tool like Firebug or Chrome dev console.
Try using display:inline-block (instead of block). It seems to work better (more intuitively) with floated elements.