I've setup a page of circular buttons.
When the mouse hovers over them individually, they rotate to show the reverse of the button.
It's loosely based on this demo from CoDrops http://tympanus.net/Tutorials/CircleHoverEffects/index4.html
My problem, is that when the mouse hovers over a certain button, I want to reveal the reverse of multiple buttons on the page at the same time (i.e. to flip them).
This works fine in Firefox and mostly OK in Chrome where it not for the buttons becoming clipped at the edges.
Here is the demo site:
http://www.qars.co.uk/spumma/v2/
This is how it looks in Chrome when you hover over the middle image: http://cl.ly/image/1K0y1y0t1z2j
Again, works great in FireFox, I just can't see where Im going wrong with Chrome.
On your .fakeit CSS rule,
add box-shadow: 0 1px 15px rgba(0,0,0,0.1);
seems like the issue is with
-webkit-perspective: 800px;
on .ch-info-wrap
Not sure what it does but it seems removing makes it work.
Related
Consider the following example : https://codepen.io/anon/pen/OOrMLm
Each white block can be clicked, which reveals a small red popup in which I need the users to make some choices.
On Firefox, everything seems to work fine (if I use display:inline-block; on the white elements), but on Chrome and Safari the behaviors are kinda weird.
The two bugs are the following :
displaying the red popups in position:absolute that are located on the right hand side seems to affect the flow in the columns (the blue blocks expand), while it does not in Firefox (which is what I want)
clicking inside a red popup that is overlapping onto the 2nd blue div will not be caught as a click inside the popup (it seems like the popup is "below" the 2nd blue div somehow).
I played around with forcing the z-index and transform: translateZ() but with no luck. It seems like display: flow-root; helps a bit on Chrome, but I could not get it to work fully.
Any idea on how to fix this in Chrome and Safari ?
I am trying add thin borders to a div. My CSS is like this:
border: solid;
border-width: 1px;
Yet the result borders don't look equally thin in my browser. As you can see below, the borders on the left and bottom look thicker than the borders on the right and top.
I want to make the borders equally thin. I have tried to add
shape-rendering: crispEdges;
But it doesn't change the look. JS Fiddle example here.
I tried this in my Chrome Version 41.0.2272.101 m -- it looks bad. I've also tried this in IE -- it looks fine. So I know it's not my monitor...
Your monitor is set to a non-native resolution. (Windows 8) Right click on your desktop, click "Screen Resolution" and then select the recommended resolution.
I have same problem.
After some research I found out it's caused by 1.5 device pixel ratio (Windows 8.1 set scale everything to 150%).
Solution is to set sale to 100% but it makes texts supertiny so I can't use this solution.
Both IE(11) and Chrome are affected. Firefox is OK.
Same issue is goes for mobile phones and tablets:
mobile safari rendering buttons with border
Uneven border in mobile browsers
You likely have other elements to the left and below the box and may be accidentally applying borders to them as well to make it appear that they have "double" borders.
Make sure you isolate the box and try again.
A 1px border can't be uneven like you are displaying.
Slightly baffled by this one - I'm working on a tiny static site with a large background image, which is rendering with a 1px black top border in Firefox. There's no border in the image and it doesn't render in any other browser. I haven't managed to find any references to this happening with a background image anywhere and am not quite sure how to fix it!
This seems to be fixed in the latest build of Firefox (not sure whether to post this as an answer to my own question or as part of the question?)
You should make sure you have resets for all css, like normalize.css. This way all browsers act the same.
img { border:0; }
In all other browsers, including IE10, this CSS removes the outline when clicking on a mapped area on an image anchor:
area {
outline: none;
}
But lo and behold, not in IE11, at least not the latest version I can get for Win7. A quick demo page: (demo removed). Click on a thumbnail; on the full-sized images, the right 60% is a link to the next image, the left 40% to the previous image.
I've tried all manner of CSS variations, including:
outline: none !important;
Applying it to every CSS class and ID I can think of seems to make no difference, including *, img, map, area, .gr-slideimage, #gr-thisMap, and so on. The only thing I've found so far that works is the old:
hidefocus='true'
on the img tag itself, but that doesn't validate, of course.
Can anyone crack this with CSS?
IE11/Win7 seems to ignore border settings set to 'none' in some circumstances. Had this issue with CSS styled buttons this week. I had to make the border 'solid' and change the color to match. Sure there's a better way - surely MisterNeutron and I aren't the only ones to notice this bug?
It appears IE11 needs outline-style: none; in order to work properly. You can also refer to: http://msdn.microsoft.com/en-us/library/ie/cc304065(v=vs.85).aspx for any other possible IE related issue. Hope this helps.
There's this odd IE issue that has been twisting my mind. It works correct in other browsers (Chrome / Firefox).
For those that want to dive directly in the code, here's a Fiddle. Important parts:
HTML:
MyButton
CSS:
.btn {
display:block; width:135px; height:58px; text-indent: -9999px;
background-image:url("http://i47.tinypic.com/e7f4w6.png");
}
.btn:hover { background-position:bottom; }
In the Fiddle I've added an arrow to display the correct "center" of the image. As you can see, this is just a simple image sprite for navigation. The height of the image is double the height of the actual button, so we can apply the background-position:bottom .
But for some reason, when hovering, IE doesn't display the image correctly. Somehow the arrow (black line) and the center line (red line in the hover state) don't align anymore:
Normal state:
Hover state:
Because the line "jumps", the text also jumps (hardly noticeable in my example, but on my project you see it pretty good). Tested & occurs with IE9 and below on Win7.
I hope you might have a solution for this little brain teaser!
The comments from jQuerybeast, Miguel-F & Billy Moat above pushed me to another direction (thanks folks!), and I tried to open my Fiddle on another machine. Same browser, same OS & it was working fine.
After some further investigation, I found out it was my screen resolution and/or video display and/or taskbar that caused the strange effect. This would mean my code is correct, but somehow IE draws some pixels wrong on the screen (where other browsers do this correct). But this might be a whole new question.
Once again, thanks for the help!