I have a fixed position tooltip that works in all browsers except Safari. In safari, the tooltip is being cut off by the parent's container which has properties of overflow: scroll
Any ideas on how I can fix this?
This is the screenshot of how it's supposed to look like:
This is how it looks on safari:
These are the properties for the tooltip:
.announcement {
position: fixed;
width: 3.1rem;
height: 3.1rem;
background-image: url("./../assets/icons/announcement-alert-right.svg");
background-size: cover;
margin: 0 0 0 -2.8rem;
z-index: 1;
&:hover {
margin: -3.6rem 0 0 -14.8rem;
width: 15.3rem;
height: 6.7rem;
background-image: url("./../assets/icons/announcement-profile.svg");
}
#media screen and (max-width: $desktop) {
display: none;
}
}
This is the parent's perspective:
.profile {
position: fixed;
z-index: map-get($zindex, sidebar);
right: 0;
width: 15%;
height: 100%;
transition: 0.5s;
padding: 3rem;
box-shadow: 0 1.5rem 3rem $color-shadow;
background-color: $color-white;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
I've tried several different fixes such as:
-webkit-transform: translateZ(0); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); z-index:9999 !important) and none of them works.
Any help would be much appreciated!
Thanks!
Without knowing your html code i speculated that the parent container and the tool tip element are not at the same level so even if you increase z-index value it won't change.
Place the element at the same level that would work.Something like this
<parent-container>
//parent content
</parent-container>
<tooltip-element>
//tooltip-content
</tooltip-element> //same level
Check the parents' properties and the overlapping element's properties. Some of them has a position or a z index value that is blocking it from your desired behavior
I bet is that maybe you will need to split up the position: fixed and overflow tags across two nested div classes in Safari? I know this could be a bit annoying and inconvenient, but then that way - I don't think that the z-index will be blocked off...
HTML:
<div class="wrapper1">
<div class="wrapper2">
<div class="inner">
/* Stuff inside here */
</div>
</div>
</div>
CSS:
.wrapper {
...
position: fixed;
...
}
.wrapper2 {
...
overflow: hidden;
position: absolute;
...
}
I wouldn't have thought that the overflow: scroll would affect any of the z-index properties but we'll see. Good luck on finding a solution, hopefully I've somewhat helped!
Related
I know there have been several questions on the subject but none of them quite answers my problem... I have 13 SVGs piled one over the other (I am using a JS script to make one appear and the other disappear, thus creating an "animation" effect where something moves from one position to the other) and I positioned them as absolute to have them piled. The problem is: I work on a 17" screen and when I look with screenfly what my page looks like on bigger screens (24"), my elements are not well positioned anymore.
I have already tried positioning it with all the units I knew of (px, %, vw/vh, em, rem) but none of this works for my case...
Here is a schematic HTML code:
<svg id="step1">Lots of stuff</svg>
<svg id="step2">Same here</svg>
.
.
.
<svg id="step13">Some more stuff</svg>
And here are the CSS rules I use:
#step1, #step2, #step3, #step4, #step5, #step6, #step7, #step8, #step9, #step10, #step11, #step12, #step13 {
position: absolute;
top: 1vh;
left: 8.5vw;
margin: 0 auto;
visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
height: 150px;
}
Here is the webpage for the animation, the one I am talking about is the "Tetris" animation for mobile phones so maybe you'll have to resize your browser to see it well...
If anyone has an idea about how to make it responsively positioned, I'd be really thankful.
Benjamin
Have you looked at flexbox with a columnar direction? The items will stay vertically centered no matter the screen height. Also, I removed the ids, since they are no longer necessary.
const steps = document.querySelectorAll('.step');
let delay = .25;
steps.forEach(step => {
step.style.animationDelay = `${delay}s`;
delay += .25;
});
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.step {
visibility: hidden;
opacity: 0;
border: 1px solid;
animation-name: makeVisible;
animation-duration: 1s;
animation-fill-mode: forwards;
padding: 1em;
}
#keyframes makeVisible {
to {
opacity: 1;
visibility: visible;
border-color: transparent;
}
}
<div class="step">One</div>
<div class="step">Two</div>
<div class="step">Three</div>
<div class="step">Four</div>
<div class="step">Five</div>
jsFiddle
You can use media query to resolve responsive issue. Try this i hope it'll help you out. Thanks
#media only screen and (max-width: 768px) {
.step {
position: static;
display: block;
}
}
.step {
position: absolute;
top: 1vh;
left: 8.5vw;
margin: 0 auto;
visibility: hidden; /*They are hidden by default and I use JS to make them visible alternatively.*/
height: 150px;
}
#media only screen and (max-width: 768px) {
.step {
position: static;
display: block;
}
}
<svg class="step" id="step1">Lots of stuff</svg>
<svg class="step" id="step2">Same here</svg>
.
.
.
<svg class="step" id="step13">Some more stuff</svg>
My goal is to make a circular icon button wherein a single icon is enveloped by a circle, and the circle shrinks on hover, but the icon stays centered.
I got this effect working in Firefox and Chrome, but in Safari 9 (I assume it's similar in Safari 10), when I hover over the buttons, their vertical position occasionally moves up and down unexpectedly. It seems to mostly occur when rapidly changing which button is being hovered.
This is the HTML structure of the button:
<a class='icon-button'>
<button>
<span class='bg'></span>
<span class='icon'>A</span>
</button>
</a>
This is the SCSS code I am applying:
.icon-button {
$width: 2em;
display: inline-block;
width: $width;
height: $width;
overflow: hidden;
cursor: pointer;
button {
position: relative;
display: flex;
align-items: center;
text-align: center;
width: $width;
height: $width;
padding: 0;
margin: 0;
background: none;
border: none;
cursor: pointer;
}
.bg {
background-color: #FF9999;
width: $width;
height: $width;
border-radius: $width / 2;
margin: 0 auto;
transition: width 128ms linear, height 128ms linear;
}
&:hover .bg {
width: 0.8 * $width;
height: 0.8 * $width;
}
.icon {
color: #FFF;
position: absolute;
top: 0;
left: 0;
line-height: $width;
width: 100%;
}
}
Here is a JSFiddle page where I replicated the issue with the relevant code: https://jsfiddle.net/Auroratide/6u463jL5/3/
Does anyone know what is causing this to happen in Safari but not the other browsers? I'm probably going to need to change my strategy so the CSS is not as jank, but I'm curious nonetheless.
UPDATE:
Here a link to a video of what I am seeing, contrasting Firefox with Safari:
http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov
Try adding
-webkit-transition: width 128ms linear, height 128ms linear;
The -webkit- refers to browsers such as Chrome and Safari, so will hopefully fix the problem you're experiencing.
It seems that the below CSS fixes this:
.icon-button {
position: relative;
}
.icon-button button {
position: absolute;
top: 0; left: 0;
}
I'm still not really sure what was going on in Safari, but it seems to have been a positioning issue relative to the size of adjacent elements (I had noticed the issue does not arise on a button in isolation). Absolute positioning guarantees the elements are positioned based solely on the parent, so I'm guessing that's why this fixes the issue.
I am using very wide shapes as the background on my website (to create a certain visual effect) and am not able to prevent the horizontal scrolling. Is there any other way to achieve that besides the overflow property which doesn't seem to work for me? http://tinyurl.com/kahfjha
in your css #contact-shape and #design-shape Are width:5000px remove that and it works fine.
#design-shape {
background: none repeat scroll 0 0 #e98e82;
position: absolute;
transform: rotate(-45deg);
height: 1040px;
top: 1200px;
left: 0;
width: 100%;
z-index: 6;
}
#contact-shape {
background: none repeat scroll 0 0 #000;
position: absolute;
transform: rotate(-45deg);
height: 1460px;
top: 2757px;
left: 0;
width: 100%;
z-index: 1;
}
Update: I changed the css a bit now its keeping the backgrounds in place as well.
Use overflow-x: hidden instead of overflow: hidden on the body element and it will work:
body {
overflow-x: hidden;
}
I found a nice tutorial for making my images enlarge (like a zoom effect) on hover. The main difference between my needs and a tutorial is that I want my all images contained in a single box like container. So when I implemented the tutorial I realize that part of the enlarged image gets cut off when you hover. The effect is constrained to the container. I would like a way for the zoom to go wherever it needs to go on the page. (So you can see the whole zoomed image)
Here is my implementation of the tutorial: http://mulnix.contestari.com/wp/example225/1.php
JSFiddle: http://jsfiddle.net/dsRAH/
Original Code
Remove the overflow: hidden and all other overflows,
than for your images containers DIV remove float:left; and add display:inline-block;
* {
margin: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
background: #000;
color: #fff;
z-index: 0;
}
.photos {
position: relative;
display: flex;
flex-flow: row wrap;
}
.photo {
box-shadow: 0 0 0 2px #444;
margin: 5px;
position: relative;
max-height: 200px;
transform: translateZ(0);
transition: transform 0.5s;
}
.photo:hover {
z-index: 1;
transform: translateZ(0) scale(1.6);
}
.photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-legend {
position: absolute;
bottom: 0;
width: 100%;
padding: 1em;
background: rgba(0,0,0,0.3);
}
<div class="wrapper">
<div class="photos">
<div class="photo">
<img src="https://placehold.it/200x150/0bf" />
<div class="photo-legend">TEST DESCRIPTION</div>
</div>
<div class="photo">
<img src="https://placehold.it/200x200/f0b" />
</div>
<div class="photo">
<img src="https://placehold.it/200x150/bf0" />
</div>
</div>
</div>
It's not perfect but it's a start. I changed the overflow:hidden; in the wrapper to visible. I also put your code into jsfiddle so people can tinker with it.
http://jsfiddle.net/m8FXH/
You can try to use z-index. An element with greater z-index is always in front of an element with a lower z-index. If you main container is not overflow:hidden than you can try this out.
here is an example where you can see how it works. Hope that is helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I would suggest giving your divs one of the following classes:
colleft for the ones that are at left column
colright for the ones that are at right column
rowtop for the ones at the top row
rowbottom for the ones at the bottom row
And then assign them the following properties
.colleft {
transform-origin-x: 0%;
}
....
transform-origin-x: 100%;
transform-origin-y: 0%;
transform-origin-y: 100%;
(respectively)
That will make the zoom go in the desired direction.
evan stoddard modified fiddle
Here is the link to the domain http://linenwoods.com I am working on. I am going to fit the navigation list items on the header, but when the drop down menu is implemented I'm pretty sure it'll go under the #main div like you see currently. Is there any easy way fix to this? I couldn't find anything related to this from a google search .. was hoping someone could help me out. Below is the relevant CSS .. I tried playing around with z-index with no luck as I was told IE8 renders it strangely. If you have the time please follow the link with IE and leave a response .. I am trying to be as cross-browser compatible as possible and already am at a pretty pathetic start. Any help would be appreciated :)
body {
background-image:url('Background1.jpg');
background-position: center;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
filter: alpha(opacity=80);
}
#main {
width : 1010px;
height: 1315px;
background-color: white;
margin-top: 15px;
filter: alpha(opacity=80);
}
header {
width: 1010px;
height: 230px;
background-color: white;
margin: 0 auto;
margin-top: 15px;
filter: alpha(opacity=80);
}
footer {
width: 1010px;
height: 230px;
background-color: white;
margin: 15px 0 15px 0;
filter: alpha(opacity=80);
}
Apply this CSS (works only in IE8 and 9):
ul.nav {
position: relative;
z-index: 2; /* 2 or higher */
}
IE7 does... weird things with the z-index. If you want to target IE7 as well, you can do this (CSS hack taken from this page):
ul.nav {
position: relative;
position: absolute !ie7; /* For IE7 only */
z-index: 2; /* 2 or higher */
}
Using z-index only works on positioned elements. When you tested zindex stuff, were your elements either absolute or relative?