I have implemented a "push-in menu" mobile menu to a very basic site structure.
The menu is based on http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
For some odd reason, when I click on the "Push right" button the menu has a large margin to the right. I am not sure why this is happening or how to fix it. It works fine in IE11 but not in Chrome v52.
An example of the problem can be found here: http://seyoum.net/playground/1/
I have tried to use the DevTools to pinpoint any CSS or markup that may cause the problem without any luck.
What is causing this and how can I fix it?
This is what it should look like and what it looks like in IE 11:
And this is the problem and what it looks like in Chrome:
You've set your main wrapper to move -300px in the CSS, but you only want your menu to move. Remove this...
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
#media all and (min-width:320px) {
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
}
A jsFiddle (free tool) would be nice next time, I used your link to make one here. It does make it very much easier to answer questions. People who click on the question can look, solve, and test the solution quickly to make sure they really made a valid correction.
Turns out, I forgot a closing tag for the #page. I am so embarrassed. I shall check my markup thoroughly next time.
The reason for the blank space is that you have the following CSS rules (prefixed variants omitted for brevity):
.overlay-wrapper.has-push-right
{
transform: translateX(-300px);
}
.push-menu--push-right.is-active
{
transform: translateX(0);
}
.push-menu--push-right
{
transform: translateX(300px);
position: absolute;
width: 300px;
right: 0;
}
The last set of rules places the menu "to the right" of the container. The second rule resets the translate, and puts it back inside the container. The first one moves the whole thing to the left.
Remove the second one and you should be all set.
Related
Good morning evening or afternoon,
Not too long ago I made some code that takes the fourth .item of the carousel and gives it a new class.
Owl Carousel: How to change the size of the fourth item
Now I'm trying to make the selected .item bigger than the rest and centered using CSS with no luck.
This is the reference I'm working with :
Reference Design:
I've tried using `display: flex` and `flex-grow:1`<br>
and `position:relative` `position:absolute` too.
any idea on how to tackle this?
Thanks :D
.your-item {
transform: scale(1.1);
transform-origin: 50% 50%;
}
should fix your problem. Obviously, you want to change scale factor from 1.1 to whatever makes sense for your example.
If you want the transform origin to be at the bottom, use transform-origin: 50% 100%;
I have a div, on which I am applying css3 transform to make it look 3d & these transforms change as per the mousewheel events.
First look at the div (the brown board with dots) in normal state:
Now I apply this small css code to transform it!
.board-class{
transform-style: preserve-3d;
transform-origin: center top;
transform: translateY(0) rotateX(30deg);
}
you can guess what this code will do, right? But it does not work in expected way, this is how it renders on chrome:
But on Firefox this work well without issue:
Here is link to hosted site : http://www.buildactivityboard.com/how-it-works
Can anyone guide me what I am doing wrong, this seems like a silly issue but I can't find out what I am doing wrong.
Note:
Believe me, this used to work without issue on Chrome too! I don't know what happened now to cause this problem. I've checked this on Mac & Windows, behaviour remains same!
Changing the position from static to absolute fixes the issue:
.master-board .widget-board {
width: 750px;
height: 300px;
padding: 0;
position: absolute;
left: 50vw;
top: 50vh;
margin: -96px 0 0 -375px;
z-index: 1000;
transition: all 1.5s;
}
https://bugs.chromium.org/p/chromium/issues/detail?id=20574
Either adding perspective: 1000px to body or .master-board works.
EDIT: According to this post, seems like it's caused by a conflict between 3d transforms and position:fixed. The chromium bug tracker marked this issue as "wont fix".
I've created a fiddle to reproduce this issue:
https://jsfiddle.net/uuhqsw57/
Adding perspective to its nearest parent helped solve the issue.
i found this half page sliding menu and i think it it really cool. But i noticed that a part of the menu stays hidden behind the main body. And since i am still a beginner with all this i hope you could help me figure out what is wrong here.
I would like to see it happen so that when the menu slides open, the two sections appear, on the left is the realy menu part, and on the right is the adres part.
But if the screen isnt wide enough the menu part collapses on top and the adres part goes to the bottom..
I think it has something to do with the:
<div class="cd-half-block">
.cd-half-block {
width: 50%;
float: left;
}
But i cant figure it out! Pls help me..
I placed it on JSfiddle
jsfiddle
add jquery cdn
change this css:
.navigation-is-open main {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
I am trying to create and facebook like panels so tried to use Panels from JQuery mobile link
then i make the header and footer position to fixed and disabled the data-animate.Know the issue is when i open/close the panel its flickers is also applied ui-panel-wrap-content position to fixed when panel is opend and position to absolute when panel is closed so only the panel can be scrolled and not the page content.
Can any one tell me how to stop flickering.
Any idea is appreciated.
Thanks in advance.
Add this css
.ui-page {
-webkit-backface-visibility: hidden;
}
You can try by using the following code
.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page
{
overflow: visible;
}
Also add the following code in manifest file
android:hardwareAccelerated="false"
Hope it will help.
You can preload the side panel content. This smooths the transition and removes any delay in loading the panel. This then means the white background never shows.
I'll update later with the code required to do the preload.
I have a site with a fixed navigation bar that should scroll with the page. When I add a JS Google Map, the nav bar no longer moves:
http://amosjackson.com/map/index.html
Also, the problem only occurs when the map is absolutely positioned.
Add translateZ to the fixed element
-webkit-transform: translateZ(0);
I found out while analysing the whole google map canvas. The API adds also a
-webkit-transform: translateZ(0) to the map. this breaks many browsers in painting the fixed elements correctly.
In addition the fixed element could also need other related visibility properties like z-index and opacity.
A working solution: (I always put my map canvas into a container)
.my-fixed-elem {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
z-index: 500 // adapt for your project
opacity: 1 // some times you can remove this
}
.map-canvas-container {
width: 100%; // somewidth
height: 750px; // someheight
position: relative;
z-index: 18;
top: 0;
left: 0;
}
#map-canvas-contact {
width: 100%;
height: 100%;
}
Best regards
remove the z-index from the google maps div and also give it an opacity value such that the text becomes visible.. play around with them..
hope that helps..
It is some sort of webkit bug related to the "transform" css setting that is added to the outer maps element. The transform:translateZ(0px) is added in a style attribute, but does not need to be in there, removing it has no effect.
So the answer is to add a css line to the page and use the !important flag so it will override the style attribute's setting.
<style>
#map-canvas[style] { -webkit-transform:none !important; }
</style>
Note, the [style] part makes it only take effect if google adds the style attribute, and the #map-canvas may need to be changed to match the element you sent to google.maps.Map()