I created www.studycraft.net but then noticed that in Internet Explorer the shadow that goes across the background is at an angle (In Safari, FireFox and Chrome it's a straight vertical edge). I asked on the theme's developer's site how can I make it straight and he had told me to add this to my custom css box:
.angled-background {
transform: initial;
}
(this may have fixed it for Chrome and/or Firefox, I had only really tested it with Safari and IE before having this "transform" property set)
This does seem to be the right element because this is where he fixed another issue where this shadow wasn't always (certain window sizes) wide enough to cover the title and made that text hard to read against the non-shadowed background - my .angled-background actually looks like:
.angled-background {
min-width:1250px;
display: block;
transform: initial;
}
But in any case, this doesn't seem to fix it for IE - the shadow stills has an angle and it even cuts back in at a certain window sizes to make a strange looking corner to the shadow and then looks really bad. Here's a pic:
thanks for any help.
I heard back again from the theme's developer and he provided the solution - it should be "transform: none" instead of "transform: initial". So the correct code is:
.angled-background {
transform: none;
}
Related
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.
So i have this fiddle: http://jsfiddle.net/aA9Rm/1/ . It works just fine in firefox, but i have some issues with it in chrome, and i can't understand why. In firefox if i move the mouse after the hover in the workhover container it works fine, doesn't do anything, but in chrome if i try to click or move an inch, it starts to move (shake) and I don't want that.
I use 3D rotations, from CSS3,
-moz-transform: rotateY(-90deg);;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);
Solutions anyone?
I think you encounter the same bug from this question :
CSS Flip Transition Between Two <div>'s
It looks like a chrome bug where the div you're trying to rotate is rotating a bit too much. I can fix your jsfiddle on Chrome by changing this CSS (see the webkit degree) :
.cube:hover{
-moz-transform: rotateY(-90deg);
-webkit-transform:rotateY(-89.9deg);
transform:rotateY(-90deg);
}
It's quite hacky but I never found any clean solution.
You can also use pointer-events: none; property in some way to make it works.
I have a hover effect that when it is triggered, the box enlarges. Only issue i have is that the text seems to blur during the transition and then goes sharp again when 'transformed'.
Before posting on here i decided to have a research and came across this post which seems to be the issue with mine as well:
How to force re-render after a WebKit 3D transform in Safari
http://duopixel.com/stack/scale.html
I have applied their answer to my build and still the blurred effect happens. I have provided a link below and if anyone could advise me with what i have is possible to resolve that would be great!
eg of transition code:
-moz-transform:scale(1.05,1.05);
http://jsfiddle.net/VcVpM/1/
While it's not equivalent, setting the width, height, left, top, font-size attributes in the :hover works without the blurring on Chrome.
.cta:hover {
width: 500px;
height: 500px;
font-size: 400%;
}
The only other work-around "might" be to use animation #keyframes and set a decent amount of them ~5 or 10, it might force a correction of the blurring between each keyframe.
I found this on CSStricks.com:
It appears if you set your transforms to also use
translate3d( 0, 0, 0)
it can fix it, but it does cause fonts to be a bit blurry on rotate/transform. See here: http://codepen.io/WillsonSmith/pen/4/2
I use Jquery and needed my slider's H3 tags to be fixed. Larger text wasn't blurry for me.
I wrote the line
$("#slider1_container").find("h3").css("-webkit-transform", "translate3d(0,0,0)").css("-webkit-text-stroke", "0.15px");
and that fixed it best for me. I needed the -webkit- in front of my transform. I don't know why, as others said not to use it. I uploaded an image of the way it looked with some different settings.
There are many working solutions to display transparent pngs correct in IE, but all these solutions will not work if the image is in a rotated container.
I' ve tried
img{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}
to work around IE' s transparent png bug, but it does not work.
Ive created a show case at .
http://jsfiddle.net/s__a/Hmyc2/
Please be shure you visit this with Microsoft Internet Explorer 7, rotation is not implemented there for IE8.
Can anybody help to display the rotated image correct in IE7/IE8?
Best regards.
Solid Background Only Solution Found
It took some digging around to piece it together. My first lead was this site, which yielded the following change of code. Actually, I just now noticed, what I have below is the same code you said didn't work in your question, but yet it does for me... recheck my fiddles and see if it works for you now. Note that in this fiddle it worked for IE7 but not IE8 (the img does not rotate).
.test-1{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF)";/* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */
clip:rect(0px 276px 267px 0px); /* top,right,bottom,left */
}
So a little more digging and a Stack Overflow answer helped make a fiddle work for IE8 too! The IE8 final fix was that the item being transformed with the Matrix filter needed to have a z-index added in order to correct the bug of it not rotating the child img element.
However, this "fix" is apparently still only a partial one. The issue on the rotated element remains at present for any transparency to the background itself, because if the alpha value for the gradient is set to transparent #00FFFFFF then it only functions on the non-rotated element.
http://workshop.wpcoder.com/daniel/tvexperts/
In Chrome, if you click "Production" and then "Contact" the position: fixed header disappears, but comes back when you move the scrollwheel. I have no idea what the cause is, and so far I can only detect it in Safari and Chrome, but Firefox is fine so I think it is a webkit bug.
One method of solving this issue is to force the fixed-position elements into their own render layers. This can be done by applying a 3d transform, for example:
.navbar-fixed-top {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Hope this helps.
Actually if you watch it close, in Firefox also has the same bug. The difference is that in there it show less content from the previous link. Perhaps your problem can be solved defining, in CSS, a min-height value for the divs of the links.
div#contact {
min-height:700px;
height:auto
}
After a local test I saw the real problem :). I've created a correction.css and tested in Opera 11, Safari 5, Firefox, 3.6, Firefox 4.0 beta 11 and Chrome 9 all on Mac OS X. File has this content:
html, body {height:100%;overflow:auto}/* makes the the magic trick of disappearance, disappear */
#contact {min-height:700px;height:auto}/* makes the contact div h2 closer to the top */
The height adjustment did nothing for me. The fix for the issue with a fixed position element disappearing in Chrome for me is:
window.scrollTo(window.pageXOffset,window.pageYOffset-1);
Fixed position elements are lifted to a composited layer in both Blink and WebKit, by default. There is no need to lift fixed position elements in Safari, as they are already composited.
What you need to do is the reverse. You need to lift all non fixed:position elements by using translateZ(0):
http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb