On my site I have a container in which numerous divs containing one i elements with background-images are rendered. Those i elements all have the same background-image but with different background-positions so that only one http request has to be made, which is general best practice for smaller icons. The divs should be horizontally centered in the container.
My problem is that on Chrome and Firefox browser (latest versions) the rendering of the background images is not working as intended on certain (wide) screen sizes. Specifically on Chrome it will always not show some of the elements background-image unless the element is hovered and on Firefox it will not render background images at all.
If I add float: left to the divs inside the container the rendering issue is solved. However I want to have the elements centered in the container which does not work with the float left.
My question is what am I doing which is causing this behaviour on certain browsers and how can I try to resolve it?
You can have a look at this problem for yourself on:
http://staging.koreanbuilds.net
Here is a screenshot of the behaviour on Chrome and on Firefox
This is the css code for the container and elements:
/* Container of clickable champion icons */
#champContainer {
width: 100%;
padding-right: 10px;
padding-left: 10px;
text-align: center;
position: relative;
}
/* Champion images div container class */
.champIcon {
width: 65px;
height: 65px;
margin: 1px auto;
overflow: hidden;
}
.champIcon i {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
}
.champIcon i:hover {
zoom: 1.05;
cursor: pointer;
-moz-transform:scale(1.05);
-moz-transform-origin: 0 0;
}
Additionally the divs have one of those two classes
.nodisplay {
display: none;
}
.yesdisplay {
display: inline-block;
}
The i elements always have the following class
.chmp {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
text-align: left;
cursor: pointer;
}
as well as a class defining the background-image and position for example
.chmpashe {
background-image: url(http://statics.koreanbuilds.net/champion_65x65/sprite.png);
background-position: 0 -455px;
width: 65px;
height: 65px;
}
I don't see anything wrong with your code. It looks like this might be the same issue you are seeing here as I can't seem to load your spritesheet on it's own in Firefox
It might be worth cutting your sprite sheet down and testing if that works.
hope that helps!
edit:
Looking at your live site you have a more traditionally shaped stylesheet which doesn't go beyond 1000 pixels in ether dimension. It looks like the one you are using on staging goes beyond 80,000 pixels which looks to be where your issue is.
Related
I'm attempting a project for myself, and I've found myself somewhat stuck.
I'm trying to make it so that text pushes onto the screen (from off screen), then bounces into the center. After reaching the center, it should expand into 3 (of the same text), while also fading in.
I don't know how to make something simultaneously fixed, and also move in line with an animation.
To be clear, I'm not talking about stacking things vertically -- I mean literally I would like the elements to appear as if they were one until the animation starts which separates & fades them in.
I'm sure there's some way to do this by simply multiplying the parent object, but I'm, admittedly, out of practice. Thus I'm trying to brute force it.
I've tried to use flexbox to make the objects fixed using position: fixed;, which is what I'm currently using. I also attempted keeping them all in the same flex container, which didn't work. Lastly, I tried just brute forcing it, but it doesn't work on every OS, so that's a no-go as well.
https://jsfiddle.net/4z203mxb/#&togetherjs=4o62tMyoEx
This is the CSS I'm using for the initial portion:
.nameContainer {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
max-width: 1500px;
font-size: 7rem;
pointer-events: none;
position: relative;
animation: move1 4.25s ease 0s 1 forwards;
}
Which transitions into this when it "separates."
.nameContainerTwo {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
max-width: 1500px;
font-size: 7rem;
pointer-events: none;
position: fixed;
animation: move2 3s ease 1.275s 1 forwards, delay 1.275s 0s 1, fade 2.275s ease-in-out 1.275s forwards;
This is what I've got thus far. (If I linked that incorrectly, apologies, I've never used it.)
When we expand transition is smooth but when we collapse transition is not good... when its about to collapse I see a shake.
I played with transition but its not working. Can you help me providing my code in the fiddle?
.accordion-section {
border-bottom: solid 1px #000;
}
.accordion-section > h3 {
padding: 6px;
font-size: 16px;
background-color: #CCC;
margin: 0;
}
.accordion-section > .body {
height: 0;
padding: 0 10px;
overflow-y: hidden;
transition: height .5s;
transition: height .5s, padding-top .5s, padding-bottom .5s;
}
You can transition max-height instead of height and enclose the body content with padding, etc inside of the element you're transitioning (added .body-inner in .body). I also added a transition for scale() as it will cause a more "accordion" style collapse, but you can try it without that.
with scale() - http://jsfiddle.net/b4L6kyg4/93/
without - http://jsfiddle.net/b4L6kyg4/94/
Just give the initial div background color green. when the accordion is closing it doesn't have any background so it makes it look as if the div is flickering.
.accordion-section > .body {
background: green;
}
There are a couple of things you can do:
First, accelerate some device's hardware by using -webkit-transform: translate3d(0,0,0); . Second, use the CSS animation property transition timing function. I am not sure which effect you are trying to achieve, but you have "ease" on certain elements. Try experimenting with "ease-out". Third, the CSS transitions you're using may not be aligned perfectly with your elements, so when the transition finished running, the div snaps back to its place. A quick patch for this problem may be animation-fill-mode: forwards; . Your fiddle does not have the actual #keyframes for animation, so it is hard to give you any further advice.
I'm in the process of updating my old website to a responsive design. I cobble together bits of script to get the look I want, and definitely don't claim to fully understand it when it works, so I could use some simple-words advice. My original site used subcontent divs to show/hide captions. See here: http://www.nancychuang.com/projects/mtc/ for caption links below the images . For the new site, I purchased an inexpensive template and have been modifying it.
I didn't know how to apply the original caption into the new template, because the original was positioned using the extremely basic method of nested tables. It seems with this current template it's not possible to have text underneath the images, so I needed something unobtrusive on top. Was able to make figcaption script work by using the code from css-tricks SlideinCaptions. So the new site will look like this: http://nancychuang.com/test/MTC.html .
figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0; }
figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease; }
figure:hover
figcaption { opacity: 1; }
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px; height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75; }
figure:hover:before { opacity: 0; }
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
This figcaption script works on touch-screen, although to be honest I don't know why! There's no reference to touch or click in the code (so I can't figure out how to make the opposite action to "click off"). On desktop computer, hovering away from the image will hide the caption, on mobile the caption is stuck once activated. Since the text is proportionately large on mobile, I definitely want the user to be able to hide it. Either if there's a way to just touch anywhere on screen to make the caption disappear, OR like the original hidediv version where I add a link for the user to click:
<DIV id="subcontent1">
<p class="caption">Mae Tao Clinic, started by Dr. Cynthia Maung in 1989, is the primary care facility for many Burmese living on the border. Helping refugees, uninsured migrant residents of Mae Sot, as well as Burmese who cross the border due to difficulties obtaining care on the other side, the clinic today offers a comprehensive range of services.
<p class="caption"><a class="caption" href="javascript:dropdowncontent.hidediv('subcontent1')">HIDE</a></p></td>
</DIV>
*related: with figcaption, can you specify the width of the hover block the way I did with my original subcontent divs? I'm not clear what 24px is referring to in the code...a minimum width, maybe? but no maximum?
Appreciate the help! Thank you!
I'll throw in an answer anyway...
In your CSS, you have:
figcaption { opacity: 0; }
which means that figcaption is not visible by default.
And you have:
figure:hover figcaption { opacity: 1; }
which means that the figcaption will be made visible when hovering the containing figure.
The above two styles are mainly what's causing the caption to appear on hovering the picture, and in the case of a mobile device - on tapping the picture.
You asked how to hide the caption on a mobile device once it appears. The simple answer is - based on the above CSS - to tap anywhere outside the picture which can be interpreted as the picture losing focus.
However, do you really want to have this effect on a mobile device? It is not very intuitive. There are ways to change the styling depending on device. For example, if viewed on mobile device, the figcaption should always appear underneath the picture, which makes more sense to me. This can be achieved by using media query CSS to target different screen sizes.
I suggest that you do some online CSS tutorials to learn all the cool things CSS can do. It's definitely worth the time especially that you're customising a website already.
As a solution you need to check is the device touch or not therefore CSS can define based on the result.
#media (-moz-touch-enabled: 0), (pointer: fine), (-ms-high-contrast: none) {
figure:hover:before {
opacity: 0;
}
.cap-bot:before {
bottom: 10px;
left: 10px;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
}
Refer to this page for example: http://blog.froy.com/bond-street-loft-by-axis-mundi/
Hovering over any of the Pin It buttons, whether an image or in the bottom of the post, causes the button to 'scroll/flip' instead of showing a static Pin It button image.
I can't even identify what the cause is... Does anyone have any experience with this? This occurs in Chrome and Firefox. Site is running off of Wordpress.
It looks like that's just the way the button was setup. If you go to this site, you'll see that's where the button is hosted. You'll notice it looks like three different buttons. That means it's a sprite and on certain activities by the mouse, it's showing a different part of the image. Just by taking a quick look I found this
media="all"
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
You'll notice in that code there are the transitions, that's part of what's making the effect happen. Also this is part of the code that is showing only a certain image, notice that background-position.
a.PIN_1392869101137_pin_it_button_20 {
background-repeat: none!important;
background-size: 40px 60px!important;
height: 20px!important;
margin: 0!important;
padding: 0!important;
vertical-align: baseline!important;
text-decoration: none!important;
width: 40px!important;
background-position: 0 -20px;
}
Now on the :hover notice where the background position is.
a.PIN_1392869101137_pin_it_button_20:hover {
background-position: 0 0px;
}
That change is what is causing the effect.
I'm displaying tooltips via pure CSS3 but the only problem I have is that the content of the tooltips has really different lengths. Some of them are just 1 line long, others up to 4 lines.
Now are these tooltips Shadow DOM elements, so how could I get the (different) height of these tooltips via JavaScript (or a pure CSS solution would be better (maybe CSS calc?)) to adjust the margin that all tooltips have the margin from the anchor element?
HTML:
Test #1
Test #2
CSS:
a:before {
content: attr(data-title);
position: absolute;
background: blue;
padding: 7px 10px;
width: 440px;
max-height: 72px;
text-align: left;
line-height: 18px;
margin: 0 0 0 0;
opacity: 0;
color: white;
transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}
a:hover:before {
opacity: 1;
margin-top: -40px;
transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}
Live demo: http://jsfiddle.net/qq3YJ/
This is the jsfiddle solution: http://jsfiddle.net/kwJz9/2/
This is what I did:
Make a relative, so this means that a:before element will have position relative to his parent a.
To place tooltip right under links I used bottom attribute instead of margin-top. Because I used position: relative to link - this means that bottom:0 for example it is when tooltip has it's bottom border right on the bottom border of the parent a.
Because you want to see tooltips under links - in :hover I changed bottom to 1.4em, which is little bit under text (.4em will be distance between them).
Because you want to see it animated I changed transition to include bottom property instead of 'margin-top'.
The last problem was that because you had :before element always in html flow - in case of second tooltip (which is big) - it occupies more space than a, so when you hover it (not the link) - you can see it. So I also added visibility: hidden to :before element to make sure that if mouse will be over it you will not see it.