I have a unique situation, instead of doing a modal to display some options I'm trying to use some 3D transforms to have a "flipping" motion which shows some inputs on the "back" of a view.
I have created a codepen to show the functionality as well as the issue.
The issue is when I flip over the div the bottom half of my back-facing form is not clickable, almost like it has some element on top of it that I can't see. It is exactly the bottom 50% that is not editable so I'm guessing something with how I'm doing my rotation is wrong.
http://codepen.io/CollinEstes/pen/qcwhd
I was able to fix your example: http://codepen.io/MikeFielden/pen/haHrG
All I ended up doing was change your rotateX(180deg) to rotateX(-180deg) and that appears to clear it up. As for why its doing this I cannot say. A browser bug perhaps?
Related
This is one that absolutely confounds me. I have a site that uses a full-screen "splash screen", which the user then slides away to reveal the content beneath. In Chrome and Firefox, everything displays properly, but on Safari (both mobile and desktop), the div is split down the middle, the left half of the div is transparent (showing through to the content beneath) and only the right half is visible. All the content within it is still positioned as if it were full-screen, but it's all abruptly cut off halfway cross the screen, right down the middle of an image and a block of text. After several days rifling through the inspector I can't find any reason why Safari would be exhibiting this truly bizarre behavior—the split doesn't seem to follow any existing borders or boundaries of any elements, the inspector is acting as if the entire div is visible.
The only thing I can think of is: This issue seems to have appeared around the same time as I introduced some schmancy transform3d effects on the body, is Safari known for being unable to properly handle transform3d effects?
Since I have no idea which section of code could be causing this glitch, I'm not sure what code I would paste here, but the website is http://vanderstank.church. I apologize again for the broadness of this question, but I am unable to narrow it down any further. Thanks for any light you may be able to shed on this situation.
Solved this myself - it was related to the 3D rotation I added. Turns out I had applied the rotateY(6deg) effect not only to body but also to the #front div. I couldn't get that #front rotation to actually work right, so I'd given up on it... but forgotten to delete the line.
But because #front had a rotateY(6deg) on it while on the same plane/axis as body, it rendered as if the right half of it was "in front of" the body but the left half was "behind" the body. Still not sure why this only happened in Safari.
Remember to delete or comment out old code, guys!
I am using angular 1 and angular material aswell. I want to use md-subheader with multiples md-virtual-repeat-container within a ng-repeat. You can find the source code on this codepen.
The problem right now is kind of tricky to explain. First of all you must resize the viewport so that the height is smaller than a full container.
Let's say i reach the end of 1 section. 2 section should appear and while scrolling, go to the top of the screen and replace the 1 section subheader (demo here). This is working properly as long as you're scrolling on the 1 section container, but as soon as your mouse reaches the 2 section container, it scrolls within it and the 1 section container still appears on the top of the screen.
Here is a Video to show you. First I scroll on the top content, then i scroll on the subheader and it goes up, then I scroll in the second content and the subheader doesn't move up, which it should do. (Try scrolling in the second content in the angular demo link).
I am aware the codepen provided as another bug within it (I don't have it on my sources, but it randomly appeared on the codepen..), which looks kind of like an infinite scroll but you can use the slider on the right to scroll slowly and you'll understand what I mean. This is not the bug I'm trying to solve with this issue.
The html is pretty straight forward, since it's just a mock pattern to reproduce the bug I have on my app.
<section ng-repeat="title in vm.dataset">
<md-subheader>{{$index + 1}} Section</md-subheader>
<md-virtual-repeat-container>
<p md-virtual-repeat="item in vm.dataset" md-on-demand="{{vm.onDemand}}">{{item.value}}</p>
</md-virtual-repeat-container>
</section>
I believe the problem has something to do with the fact that you have to specify a height for virtual repeaters containers in order to work. This implementation would work perfectly with normal ng-repeat.
There is a dynamic css adding transform: translateY(n) !important;
to .md-virtual-repeat-offsetter, n value depends on the scroll.
So easily the solution is to stop this behavior by adding:
.md-virtual-repeat-container .md-virtual-repeat-offsetter {
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
Check the updated CodePen.
Hope this helps :)
For some reason, my Twitter Bootstrap modals don't seem to be working correctly. On a long page, the modal doesn't stay fixed on the screen - and is instead displayed at the top of the page.
The modals are displaying at the top instead of staying on-screen and fixed.
I hope this makes sense, and someone might know what's going wrong here. Something in the wrong place, something missing possibly?
This probleme should be only in webkit browsers, cause in core.css you have added
body {
-webkit-transform: rotate(0deg);
}
If you remove this, everything should be fine.
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I'm trying to create a parallax website. But then I have an issue with fixed positioning.
I have several sections , each with a background-attachment:fixed.
A position:fixed menu bar on the top with an hidden element in it on top of all sections.
A google map 100% with in one of the sections.
Now, the problem is when I scroll the page with animation in google chrome, the scrolling does not go smooth and it flashes several times while scrolling.
I do the scrolling with greensock scrollTo plugin , but that is not the problem as I also tested it with jquery .animate() method. Same result.
I did a research , and found out that chrome has a bug or problem with Fixed positioning ( and sometimes when you put hidden element in it )
Some pages suggested to use these two with the fixed elements :
-webkit-backface-visibility:hidden;
-webkit-transform: translateZ(0);
I added this to the fixed menu and some of the choppy behavior of it reduced , but still not smooth.
If I add this to the sections with background-attachment:fixed elements, the scrolling animation goes smooth but does not act as fixed anymore.
Somebodies says that chrome has problem with large images, some says it has issue with fixed position and somebodies had a solution that did not work for me :D
I uploaded the page :
http://www.FarzanMohajerani.com/test/parallax
just click anywhere on the page to scroll.
I also created a jsFiddle with the exact same code. But I don't know why it doesn't have the problem in jsFiddle :
http://jsfiddle.net/Farzanmc/cRqxT/5/
It would be great if anyone could direct me to the right solution or remind me if I'm doing anything wrong.
Thanks
This solved the issue for me:
-webkit-transform: translate3d(0,0,0);
Adding this rule turns the element into a layer in Chrome, which avoids repainting. In my unique situation the error was caused by browser re-painting.
I', having the same problem with Chrome at the moment and I narrowed down the cause to the following combination:
1) background: fixed;
2) transform: (any transform, even just putting scale(1), would instantly break it).
As long as an element that contains fixed background image doesn't have any "transform" on it, it works fine. But as soon as you even add "transform: scale(1);" which doesn't actually make any real transformation, it completely breaks the fixed background image. You can start scrolling, but it disappears. If it was outside of the screen, it will never appear at all, no matter how far you scroll.
So essentially, the problem is that Chrome at the moment can't handle fixed background images in transformed elements. No matter which level of descendent or ancestor we are talking about.
The thing is, this is pretty much an essential stuff that and I'm really hoping that it gets fixed as soon as possible, because it's extremely limiting. You can't disregard Chrome as if it's IE6.
And you can't apply "position: fixed;" on an "img" element, because it will be fixed to the first "transformed" ancestor, not to the real screen, since that's apparently how it's supposed to be treated, according to W3C. Although, some new value would be welcomed, some that can break all the way to the very window, and fixit to those coordinates.
I ran i to a same problem and fixed it this way:
I had to deal with fixed header on a website and anytime i would scroll with a mouse wheel the header would get choppy.... I had a display:none element in a header and as soon as i removed the element, header became fixed and steady, now it displays well no matter how fast i scroll.