I'm trying to emulate a certain kind of menu that can be seen in iOS with CSS. It has menu items in a ul, and clicking each one makes the menu slide over to reveal the page.
However, whenever the menu is sliding (while it's actively sliding) the corners turn square. Then they go back to being rounded after animation is finished.
Here's a jsfiddle with a lot of my superfluous styling code cut out. If you click on either of the titles in the list, you'll see that the corners turn square just as the content is animating. This can be seen again when you press the back button.
I see this issue in the latest Chrome and Safari, but not in Firefox.
You could give #modal-content a z-index of 1 (assuming nothing below it has a z-index greater than 1) and it should keep the border-radius during the transition.
.modal-content {
position:absolute;
bottom:0;top:0;left:0;right:0;
margin: 10vh;
border: 1px solid #ccc;
border-radius: 15px;
overflow:hidden;
z-index: 1;
}
By making .modal-content higher in the element stack, when the transition happens the child elements of .modal-content are moving "underneath" .modal-content. So .modal-contents border isn't obscured by the transitioning child.
Related
There are so many questions about Chrome and css transitions that I'm not sure if this has been asked before.
My situation is this: I have a layout that is basically a left and right split page. A box of content from the right side needs to be displayed over the content on the left side (I have no say in this, the design between desktop and mobile makes this necessary). The issue comes when transitioning images that are in the left side. The images are 0 opacity by default and displayed by applying an .active class to the appropriate image that sets its opacity to 1. I'm using css transition to animate it.
When the animation takes place, the box from the right side disappears until the transition is finished. The images in the left side do not layer over the top of it, it's not a background issue, and no matter what I set the z-index of the left and right side the right side box positioned over the left content disappears until the transition is finished.
Code example
<div>blah</div>
<div>another div</div>
<p>meh</p>
Here's a plunker to illustrate the issue (only occurs in Chrome): http://plnkr.co/edit/G2Ohg01PodUKN1xi2izq?p=preview
(seriously, you have to include code to link to plunker, what's the point of plunker then?)
None of the other issues I've seen have addressed this situation. Everything else I've seen has been about issues with the transitioning elements themselves and not elements in completely different code blocks positioned over those transitioning elements.
Any ideas on how this can be overcome or should I just tell the designers "deal with it"?
I'm just gonna take a stab in the dark and assume it's the white text. It's the only thing that's disappearing on the page when the transition is enacted.
your rule for .rightside .right-content has some CSS that's causing this behavior. Remove it and you should be good to go.
Your code:
.rightside .right-content {
position: relative;
z-index: 1;
padding: 1em 1em 3em;
/* overflow:hidden; ------------- Commented this.*/
float: left;
box-sizing: border-box;
width: 100%;
}
The .rightside container isn't allowing its overflow to be displayed, and the transitions are failing to animate this.
Your demonstration returned:
http://plnkr.co/edit/5C2cCZqnB4x7MTdeCGAn?p=preview
Codepen Alternative:
http://codepen.io/anon/pen/BzEkEP
I have an application that contains a vertical scrollbar on the page because one of my two lists on the page can be very long and I want the user to scroll up or down. What I found was that sometimes the user just hovers the mouse over other elements on the page and suddenly if the scroll bar was at the bottom, Chrome causes the scrollbar to jump to the top.
Has anyone seen this behavior in Chrome? It works fine with the other browsers. I tried changing a bottom padding on one of my header div elements:
padding: 0.75em 2em 1.75em 2em;
and it seems to have reduced the problem, but the problem still occurs occasionally. One thing I do notice is that it occurs when one of my lists are too long.
It turned out to be a CSS problem. Whenever, the element was hovered, the CSS added a box-shadow on the element using the :hover selector. This caused the border to increase and caused the list to change size. When I removed the box-shadow, the problem went away. It was not a Chrome problem.
I see you've already solved your problem but I just bumped into a very similar problem where Chrome (and only Chrome) would scroll a list to the top when the first element in the list was hovered. I had no box-shadow but instead had a list with some padding:
.list {
padding: 0 10px;
}
And when a list item was hovered, a negative margin and some padding was added (for a reason I can't really remember):
.list-item:hover {
margin: 0 -10px;
padding: 0 10px;
background-color: lightblue;
}
This didn't change the size of the list, at least not visually. But after seeing your question and answer, I changed it so that the list did not have any padding and instead all the padding and margin was on the list items. Problem solved!
Sometimes the "non-hover" CSS has incomplete information; the "hover" CSS specifies this extra information. Make sure all info (like "top:") specified in the "hover" CSS has an entry in the "non-hover" also.
I'm getting a flicker in the first 3 of 9 main navigation items in my CSS menus (there are no submenus), which occurs in IE, Safari, Firefox and Chrome, but ONLY on the home page.
Specifically, the first menu item "About" flickers the most, while "Admissions" and "Academics" both flicker, but not as overtly.
My thoughts are that something is conflicting with the menus on the home page, specifically something unique to the home page, such as the Google search I've embedded in the upper navigation (and tried to style as unobtrusively as possible), or the jQuery slideshow.
I've tried several solutions suggested here for flickering in webkit, but none have solved the problem.
It looks like it's caused by your dropdown curtains being too wide. So hovering on the nav item shows them, which then immediately causes the mouse is positioned over them and not the nav item... causing them to be hidden again. Hence the flickering (I think!).
This doesn't happen on the nav items to the right because they're short enough so they don't cover the nav links when 'hidden'.
See image below of the width.
Changing the css to have a larger top value of -800px like the following may help:
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -800px;
}
I have a bug in the rendering of border-radius under all major browsers (tested: IE 9, Chrome, Firefox).
What happen is that I have a menu bar with border-radius, and in there some links width a background color. In order to keep the button inside the shape of the menu, I set a overflow hidden on the menu container. Until there all goes well, but then, there's a little white line appearing on the corner edge.
I made a reduced test case here: http://dabblet.com/gist/3828561
Anyone have a solution to overcome this one? Thanks!
A dimensions-dependent solution...but maybe that's OK since it's a menu bar not a content holder? Anyway, you can set border-radius on your inner elements, give the parent a height, and also use that height value for the line-height of the inner elements.
Once you apply the height/line-height, you don't have to use overflow: hidden.
Since your menu bar has a border radius of 3px, apply the same rounding to the appropriate corners of the first menu item like so:
.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }
And make the corresponding corners of the bar even more rounded, to hide them beneath the first menu item:
.outer { border-radius: 10px 3px 3px 10px; }
http://dabblet.com/gist/3828755
Is there any way of getting rid of the scroll track entirely? Or making it overlay the content rather than pushing it aside? Like iOS/Lion scrollbars?
The following gets pretty close, but even though the track is transparent, the content of the scrollable region is pushed over and the page background shows through.
::-webkit-scrollbar {
width:8px;
height:8px;
-webkit-border-radius: 4px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(053, 057, 071, 0.3);
width: 6px;
height: 6px;
-webkit-border-radius:4px;
}
Hmm, I thought I answered this one previously, maybe not:
Hide the overflow on the body
wrap the entire content of the site or whatever you're scrolling with a div,
Incude css properties for the
div (overflow:scroll or overflow-y:scroll).
Now you can set the track css to any opacity using rgba(0,0,0,0.3) because the scroll is not part of the body.
Another tip for customizing firefox scroll bar if you want to experiment is to:
Do the overflow thing and to overlay the scrollbar (via z-index) with a transparent div of whatever color you like,
Position the div over the entire scroll section (probably something like position:absolute; right:0; if you're using the scroll for the entire window)
Use pointer-events: none; on the divs css to make it semi-transparent.
It will give the firefox scroll a little color/ texture. (May be ideal to force the scroll to the right for comparability)
I've not tried it yet but it's do-able