In first excuse me for my bad english, I'm French. I'll do the best ! I'm here today because for the first time i don't find an answer to my problem. Monday i need to show a demo of a website and i start to panic !
So, I have a div with a rotate (45deg). Within this div, I have two div other div in inline-block (with a css rotate (-45deg). On the left i have a slider and on the right text and shortcuts. Today I joined the slider to the left position (I work on joomla). It works well but I have a problem with the slide transition. If I click "next" or "previous", the global div (the main container) becomes blurred for the duration of transition. I did screenshots of the text on the right position (best seen the difference).
Fiddle for example :
http://jsfiddle.net/asakuras/8Pk3S/11/
Pics for example :
Before click and just after the click, during the transition :
http://www.morgann-c.com/tools/js/bug.jpg
Explanations :
I tested many possibility to clean that but no solution at this time. In the script (responsiveslides.js) the transition's are reduction by the opacity. At the line 71 of the script there's the configuration of the opacity :
visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, }
If I change the opacity of the hidden class to 0 there's no transition but the bug disappears ! I think this is a problem with the CSS's opacity transition. If I delete the rotate on all the div's the bug also disappears. I tested all the CSS transform but no result ...
I'm working on this bug for 3 days and it's very important for me to find a solution quickly ...
I implore you, if someone has already had this problem i take !
Have a good week end and thank you by advance ...
EDIT //// :
Firefox 30 : "Blur" on click
Chrome 35.0.1916.153 : "Blur" everywhere on page load
IE 11 : No problems, no "blur", everything works perfectly !
First off, you were missing a - in -ms-transform (this is likely the reason why there is no blur in IE - it wasn't using transform)
Secondly, removing -webkit-backface-visibility made it so Chrome only blurs on the transition (I have no idea why you added it given nothing rotates at all).
Thirdly unless you're serving IE8- or something like that you don't need filter for the rotation and -o-transform and -moz-transform are not needed, so remove them
Lastly, the reason why it's blurry is because it's being rendered by the GPU. Though this does always happen when things are generated by the GPU, but I'm thinking that it is simply being overworked by the fact that there are two rotations and in addition to the opacity transition.
Thus, as a solution you have a few options. You can either remove the opacity transition, opting for something like margin-left:-600px (this requires changing the plugin to suit), you could move the header and paragraph outside of <div id="global"> but position it so that it's in the same position as it currently is (making sure none goes outside of the rotated square), or, my personal favorite choose another plugin! The one you're using is quite outdated and there are a lot better free ones just one Google search away
Related
I am using border-image property to create styled components with 9-slice. Also I am using css transform: scale(x) property to scale down/up my elements based on screen sizes. The issue I am running into is that my 9-slice component looks fine when scale is set to a whole number like 1, 2, 3... but if its a float then the border shows 9-slice lines/gaps and I am having hard time fixing it.
I have tried setting different values for border-image-slice as well as the scale. Initially thought that it was causing this issue when the number after decimal point is odd but that was an odd thought anyway.
<div class="Primary-Back-Button" style="transform: scale(1.2);">
<button class="Primary-Button" id="">
<div class="Primary-Button-Content">Button</div>
</button>
</div>
Expected result would be to show no lines/gaps on the border when using scale or I would be willing to change how we scale the things too. I basically want to keep the same layout on a desktop app no matter what the screen size is. This is for a desktop game that I am working on and it uses JS on UI side.
Expected result when scale is a whole number which is set to 6 in this case:
Notice the lines when I set scale to 6.25
If anyone ever run into the same issue which is very unlikely but I did figure out a solution so I am gonna put it out there.
You will need to add perspective: 1px; to the root styles() and then wherever you are using transform: scale(x); make it transform: translateZ(0) scale(x);
I am still trying to understand why that works but at least works. And its CSS so there could be some magic involved.
With the following rules:
.container[data-direction="reverse"] .pane[style*="display: none"]{
animation:SlideOutToRight 1s ease;
}
.container[data-direction="forward"] .pane[style*="display: none"]{
animation:SlideOutToLeft 1s ease;
}
The animation runs whenever (a) the data-direction attribute changes and (b) whenever the style becomes display:none. How can I change this code so that the animation only runs when the style becomes display:none but not when the data-direction attribute changes?
Right now, when the direction changes, all of the containers go flying across the screen to the other side because the animation gets applied to all of them when the data attribute changes value.
The data-direction attribute should only control which animation plays, but changes to it's value should not trigger the animation. Is this possible?
Update:
Here is a fiddle of the problem: https://jsfiddle.net/j6ytzbh6/
Expected behavior: The forward button should cause the next sequential box to enter from the right hand side while the current box exists left. The backward button should cause the previous sequential box to enter from the left while the current box exits right. No other box should move or cross the view-port when its not it's turn to move.
Reminder: This is a CSS question, so doing the animation in javascript is cheating. The idea is that Javascript controls functionality (ie a box should be shown or hidden) while css controls presentation (ie. do we make it disappear, fade out or fly to the side). You shouldn't have to re-write your plugin to change the visual way things get shown or hidden.
I'm using -webkit-transform: rotate(40 deg) and it seems that the rotated element is hiding parts of elements which are on top ( not children ) of the rotated one.
I created a jsFiddle here with the code, since it will be easier to demonstrate.
Probably this is because the rotated element hides parts of other elements, but I don't want this effect. How can I fix that?
I used z-index but it doesn't help!
You're doing a 3D transform. You have 'rotateY' in the fiddle not 'rotate'.
So you're moving part of the plane in front of the buttons.
Check for yourself by changing code for the second button to
$("div.buttonB").click( function() {
$("div.background").css('-webkit-transform', 'rotateY(-190deg)')
});
This way after clicking buttonB, buttonB will be clickable but buttonA won't.
Now change -190deg to 190deg and you'll see that it works other way around.
If you want to wrap your head around 3D transformations check out this site.
http://thewebrocks.com/demos/3D-css-tester/
Watch the video and play with the controls. Hope this helps.
So this is what I got:
http://mysite.com
Now when you press on the big fat blue button at the right with "Make An Appointment" a lightbox appears. Although this lightbox goes under the slideshow and the same with the menu, like the z-index is bigger than the lightbox. Although i have set the z-index to 999999 for the lightbox, and still it appears under them.
What should I do here?
The root of your problem is the placement of your modal-bg and modal-box.
They're both inside an element with the class "page-content-shadow" -- this class has both a position of relative and a z-index of 5. This means that even though you're setting the modal to have a z-index of 99999, that's only with the context of its parent element's z-index (which is 5 in this case).
To fix this all you have to do is change the z-index for the page-content-shadow class to 100. That will put it on top of both your nav and your slideshow (in Chrome at least).
I'm about to face a similar problem, but I've been ignoring it as best I can.
My plan, although it may not be perfect, is to run a script that will find the highest z-indexes on the page and decrement them by 1 so that my object can actually be on top.
Since you're using jQuery you could use a plugin like TopZIndex or you could simply inspect that plugin and borrow the code that makes $.topZIndex() work.
Once you have the objects with the highest z index you can mod their CSS to lower the value.
Using that plugin, the code would look like this:
var bastardObjects = $.topZIndex();
bastardObjects.css("z-index",999998);
EDIT: I'm sorry if I misunderstood, I thought you were saying that you had multiple objects with the maximum z-index and therefore they weren't playing together nicely.
Im browsing the net for more than a day now and still can't find a working solution to the followin problem.
A div should grow from nothing to 100% from the bottom up then
text should fade in
then a timeout
then text should fade-out
then div should schrink towards the bottom of the div and vanish.
.max{
max-height:100%;height:100%;color:#fff;
-moz-transition-property:max-height,height, color;
-moz-transition-duration:3s,3s,1s;
-moz-transition-delay:0s,0s,2s;
}
.min{
max-height:0%;height:0%;color:transparent;
-moz-transition-property:max-height,height, color;
-moz-transition-duration:3s,3s,1s;
-moz-transition-delay:1s,1s,0s;
}
how can I serialize max & min into one CssClass
If that's not possible how to do it in another way.
But that doesn't fly.
Anyone a nice idea or experience with this?
The transition can only work, if your start values and your end values differ.
Because your start values and end values don't differ ('you come from nothing and you go to nothing' (Always look on the bright side of life)) it is not possible in one CSS class.
What maybe possible is that you have two classes say appear and disappear and switch between them after a certain amount of time with javascript (setTimeout function)