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;
}
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.
I'm currently developing a web application using HTML5 and jQuery for iPad Safari. I'm running into a problem wherein large scroll areas cause the elements that are offscreen to appear after a delay when I scroll down to them.
What I mean by that is, if I have a row of images (or even a div with a gradient) that is offscreen, when I scroll down (or up) to it, the expected behavior is for the element to appear on screen as I am scrolling to it.
However, the element does not appear until I lift my finger off the screen and the scroller finishes all its animations.
This is causing a super noticeable problem for me, making the whole thing look choppy, although it is not. I'm guessing the iPad Safari is trying to do something to save memory. Is there a way in which I can prevent this choppy-ness from happening?
Additionally, what is iPad Safari actually trying to do?
You need to trick the browser to use hardware acceleration more effectively. You can do this with an empty three-dimensional transform:
-webkit-transform: translate3d(0, 0, 0)
Particularly, you'll need this on child elements that have a position:relative; declaration (or, just go all out and do it to all child elements).
It is not a guaranteed fix, but it is fairly successful most of the time.
Hat tip: iOS 5 Native Scrolling–Grins & Gotchas
I was using translate3d before. It produced unwanted results. Basically, it would chop off and not render elements that were offscreen, until I interacted with them. So, basically, in landscape orientation, half of my site that was offscreen was not being shown. This is a iPad web application, owing to which I was in a fix.
Applying translate3d to relatively positioned elements solved the problem for those elements, but other elements stopped rendering, once offscreen. The elements that I couldn't interact with (artwork) would never render again, unless I reloaded the page.
The complete solution:
*:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}
Now, although this might not be the most "efficient" solution, it was the only one that works. Mobile Safari does not render the elements that are offscreen, or sometimes renders erratically, when using -webkit-overflow-scrolling: touch. Unless a translate3d is applied to all other elements that might go offscreen owing to that scroll, those elements will be chopped off after scrolling.
(This is the complete answer to my question. I had originally marked Colin Williams' answer as the correct answer, as it helped me get to the complete solution. A community member, #Slipp D. Thompson edited my question, after about 2.5 years of me having asked it, and told me I was abusing SO's Q & A format. He also told me to separately post this as the answer.
#Colin Williams, thank you! The answer and the article you linked out to gave me a lead to try something with CSS. So, thanks again, and hope this helps some other lost soul. This surely helped me big time!)
Targeting all elements but html: *:not(html)
caused problems on other elements in my case. It modified the stacking context, causing some z-index to break.
We should better try to target the right element and apply -webkit-transform: translate3d(0,0,0) to it only.
Sometimes the translate3D(0,0,0) doesn't work. We can use the following method, targeting the right element:
#keyframes redraw{
0% {opacity: 1;}
100% {opacity: .99;}
}
/* iOS redraw fix */
animation: redraw 1s linear infinite;
When the translate3d doesn't work, try to add perspective. It always works for me
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;
Increase Your Site’s Performance with Hardware-Accelerated CSS
Adding -webkit-transform: translate3d(0,0,0) to an element statically doesn't work for me.
I apply this property dynamically. For example, when a page is scrolled, I set -webkit-transform: translate3d(0,0,0) on a element. Then after a short delay, I reset this property, that is, -webkit-transform: none
This approach seems to work.
Thank you, Colin Williams for pointing me in the right direction.
I had the same issue with iscroll 4.2.5 on iOS 7. The whole scroll element just disappear.
I've tried to add translate3d(0,0,0) as was suggested here. It has solved the problem, but it disabled the iscroll "snap" effect.
The solution came with giving the "position:relative; z-index:1000;display:block" CSS properties to the whole container that holds the scroll element and there isn't any need to give translate3d to child elements.
I had the same issue using an older version of Fancybox.
Upgrading to v3 will solve your problem or you can just add:
html, body {
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
At time translate3d may not work. In those cases perspective can be used
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;
I'm pretty darn sure I just solved this with:
overflow-y: auto;
(Presumably just overflow: auto; would work too depending on your needs.)
There are cases where a rotation is applied and/or a Z index is used.
Rotation: An existing declaration of -webkit-transform to rotate an element might not be enough to tackle the appearance problem as well (like -webkit-transform: rotate(-45deg)). In this case you can use -webkit-transform: translateZ(0px) rotateZ(-45deg) as a trick (mind the rotateZ).
Z index: Together with the rotation you might define a positive z-index property, like z-index: 42. The above steps described under "Rotation" were in my case enough to resolve the issue, even with the empty translateZ(0px). I suspect though that the Z index in this case may have caused the disappearing and reappearing in the first place. In any case the z-index: 42 property needs to be kept -- -webkit-transform: translateZ(42px) only is not enough.
This is a very common problem faced by developers and that is mainly due to Safari's property of not recreating elements defined as position : fixed.
So either change the position property or some hack needs to be applied as mentioned in other answers.
Issues with position fixed & scrolling on iOS
Change to position fixed on iOS Safari while scrolling
In my case (an iOS PhoneGap app), applying translate3d to relative child elements did not resolve the issue. My scrollable element didn't have a set height as it was absolutely positioned and I was defining the top and bottom positions.
Adding a min-height (of 100 pixels) fixed it for me.
I faced this problem in a Framework7 and Cordova project. I tried all the solutions above. They did not solve my problem.
In my case, I was using more than 10 CSS animations on the same page with infinite rotation (transform). I had to remove the animations. It is OK now with the lack of some visual features.
If the solutions in other answers do not help you, you may start eliminating some animations.
The -webkit-transform: translate3d(0, 0, 0); trick didn't work for me. In my case I had set a parent to:
/* Parent */
height: 100vh;
Changing that to
height: auto;
min-height: 100vh;
solved the issue in case someone else is facing the
same situation.
In my case, CSS did not fix the issue. I noticed the problem while using jQuery re-render a button.
$("#myButton").html("text")
Try this:
$("#myButton").html("<span>text</span>")