Hey guys i have this carousel for which the arrows are created entirely in CSS , see HERE.
Now the arrow has a slight error on hover i have applied the following code to the arrow circle:
CSS:
.arrow-outer-prev:hover,
.arrow-outer-prev:focus,
.arrow-outer-prev:active {
-webkit-transform: translateX(-5px);
-ms-transform: translateX(-5px);
-o-transform: translateX(-5px);
transform: translateX(-5px);
}
(The fiddle does't show the error , so i will be sharing a link).
Now on shower my intertion is to move the circle, but an error occurs and along with the circle the arrows also tilt slightly , SEE GIF.
The error can be seen on this link too HERE.
The bug looks slightly different in FF and chrome. In chrome the bug looks even more awkward though. unfortunately i have not been able to reproduce this bug , nor has debugging in chrome using dev tools worked for me.
Can somebody point out to me what am i doing wrong here ? Why is are the arrows moving when the CSS is clearly for only the circle to move ?
Related
I am experiencing some weird issues with CSS scale transitions. The scaling works fine, however there are some weird lines around the scaled element, which disappear after scrolling. This happened in a Chrome browser and in Microsoft Edge. And I don't assume it has something to do with margin, padding, the z-index, colors or anything else along those lines, because it happened with and without these properties being included in the relevant CSS.
This is the relevant CSS as a quick draft:
.element {
background-color:black;
transition: transform 0.5s;
transform:scale(1, 1, 1);
}
.element:hover {
transform:scale(1.1, 1.1);
}
Here is a quick recording to demonstrate that: https://streamable.com/cyvkjm
Here is also a screenshot for those who can't see the video for some reason:
Your streamable link worked fine for me. I remember having a problem similar to that a while ago, and it was something to do with using 3d scaling
Check this out though, I'm fairly certain backface-visibility: hidden and the -webkit equivalent will fix it. As I can't reproduce this I can't be of much more help
CSS transition on element leaving lines
Edit: after reproducing the problem we found a fix. Tested and works in Chrome/Edge/Firefox. perspective(1000px) seems to work better than perspective(0)
.element {
transform: scale(1) perspective(1000px);
}
.element:hover {
transform: scale(1.1) perspective(1000px);
}
I'm running into a weird problem that makes a div invisible.
My goal is to create a shadow for a 3D object, in perspective.
Because a shadow is blurry, I am using -webkit-filter: blur(8px);, but when I try to add perspective with -webkit-transform: rotateX(45deg);, and the amount of degrees is more than 45, the div just disappears.
My Chrome version is 27.0.1453.47 Beta
Check out this fiddle to reproduce the problem for yourself. (Chrome only.)
I hope you guys know more about this problem:).
I am experiencing an error in Firefox with elements that flip on hover. (The error can be seen in the attached screenshot).
The elements are css only, using box shadow, border-radius and things like
(*-)transform-style: preserve-3d;
(*-)transition: all .5s cubic-bezier(.8,.1,.3,.9);
(*-)perspective: 600px;
(*-)transform: rotateY( 0deg );
I could not find out why this error occurs, any ideas?
Additionally sometimes there is an error with the shadow.
Cheers,
Lukas
It seems to have been fixed with the new Firefox build.
I've been developing a website for my FIRST robotics team. However, recently a horizontal scrollbar has appeared which seems to have no explanation. No elements protrude past the edge of the page, and it works fine in IE. I can fix it with body { overflow-x:hidden ) but I'd rather find the true culprit. Any help would be appreciated. The site is wordpress-based, and can be found here.
Here is the reason on line 22 vender-extension-style.css
try to remove this
#header-cut-out {
-moz-transform: skew(-45deg);
}
line 28 vender-extension-style.css below css on img tag
#header-cut-out img {
-moz-transform: skew(45deg);
}
your scroll will remove and you have to work on it to get the desired output.
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here