My problem is pretty weird. I have a background in a container::before, absolute-positioned and on every browser it works perfectly.
On IE 11 when I first load my page, my background only takes the width of my container (both sides are not visible). When I open my debugger or when I move the window the sides are revealed.
I tried this hack but it doesn't work.
.connexion-layout {
position: relative;
overflow: hidden;
}
.connexion-layout .container {
padding-top: 200px;
padding-bottom: 200px;
}
.connexion-layout .container::before {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background: none no-repeat center center / cover;
}
#media screen and (min-width: 980px) {
.connexion-layout .container::before {
background-image: url("../../theme/images/connexion-bg-desktop.jpg?1433411383");
}
}
#media screen and (max-width: 979px) {
.connexion-layout .container::before {
background-image: url("../../theme/images/connexion-bg-mobile.jpg?1433411383");
}
}
Have you ever had something like this?
Adding position: relative; to the parent fixed this exact same bug for me.
When you say "it corrects itself when I resize the window or open the console" you are actually saying "forcing a browser repaint".
I haven't encountered this exact issue, but I did have a similar one with webfonts in Chrome a while back. It had to do with the order of loading.
So, based on that information, I'm going to guess that because the browser renders things in order, it's rendering the :before element first, then the parent element. However, the :before element's position is based upon the parent element (which it hasn't loaded yet) so it goes to the next available positioned element. When you resize, everything is loaded so it's fine.
There are two things I would try.
First, if you can, move it to the :after element. That may fix it. Since it is absolutely positioned, the :before vs :after shouldn't matter.
If that isn't possible, you can use a javascript/jquery repaint hack.
if($('html').hasClass('ie11')) {
$('.connexion-layout').hide(0, function(){$(this).show()});
}
Alternatively, you can try this in CSS. Load it at the bottom of your CSS. Again, this was meant for fonts but it should force a repaint regardless:
.ie11 body {
animation-duration: 0.1s;
animation-name: repaint;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-delay: 0.1s;
}
#-webkit-keyframes repaint {
from { opacity: 1; }
to { opacity: 1; }
}
Both the jquery and css assume you have a classname of ie11 on your <html> so that you don't unnecessarily repaint other browsers.
I don't have a PC at the moment, so please let me know if none of these work and I'll find my BrowserStack login and give it a whirl.
Related
When I change blur filter, image trembles a little bit.
Here is demo at jsfiddle. Please click twice on button at demo
body {
background-color: #000;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
z-index: -1;
background: url(https://static01.nyt.com/newsgraphics/2017/12/26/2018-1-olympics-climate/assets/images/469466931-1254.jpg) center no-repeat;
background-size: cover;
transition: filter 2s;
}
body.blurred::before {
filter: blur(30px);
}
I am using Chrome 63.0.3239.84 on Mac with non-Retina display.
I see many similar question, but no one answer helps me
image moves on hover - chrome opacity issue
CSS transition effect makes image blurry / moves image 1px, in Chrome?
I cheated problem using transition by steps, not smoothly
transition-timing-function: steps(10, end);
It is not a solving, it is a cheating and can be applied not everywhere.
I can't explain it, but it works for me.
https://jsfiddle.net/tuzae6a9/6/
This is a website that I and some friends of mine are building for their youtube channel.
I got this popup code from W3schools
I have the popups working but I want the popups to be 320px wide instead of the 160px and aligned with the image. The problem is when I widen the popup to 320px and try to center the popup onto the image, it never works out. All of my solutions have either moved the popups further to the right OR have messed with the actual layout itself.
What I've tried - after setting the width to 320px, in the CSS I've tried deleting the margin-left property and/or setting it to 0px, I've tried deleting the left property and/or setting it to auto, I've deleted the padding, I've messed with the position property in both the .popup and .popup .popuptext but alas, nothing has worked. They have either messed with the layout itself or just moved the popups further right. I've also tried researching online for the solutions but I haven't found a solution because I think that this problem is too specific, since I got the original code from W3schools that nobody has addressed it before and posted it online. Either that, or I'm still just too new to be able to research the answer specifically enough. Also, I'm still trying to wrap my head around the position property. I think the problem is in the position property because when I inspect the elements, I see how much positioning there is other than margin or padding, and I want to say that's what is throwing things off.
Here is the relevant CSS code-
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
And here is a link to the actual site so you guys can see what's going on and check out the source code behind it.
The Site
Thank you so much. Any and all help is greatly appreciated. To see the popup, click the episode title.
You need to remove the margin-left.
After you do that, set your desired width and define a property called transformwith a value of translateX(-50%);
Leaving you with:
.popup .popuptext {
visibility: hidden;
width: 320px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
}
I don't know if you are aware but Bootstrap already has its own popover.
On a side note, you should not be looking at W3Schools, it is not a good source.
Here are some better resources:
Plain Javascript
CSS Reference Codrops
It seems that if you remove the left: 50% and margin-left and then add width: 320px your problem is gone. Try not to just copy-paste from W3Schools as it's very outdated. A more reliable source is MDN.
you could always use bootstrap class text-center
http://getbootstrap.com/css/
I've made a slideshow that works by putting three inline blocks next to each other (all with the same background-image) within a slideshow container, and using translateX to move that container 33% of the way to the left/right, before looping. The three inline blocks pretty much ensures it will always look continuous and you never see a seam at the each of your screen.
The slideshow is placed into another container of its own, typical width, and overflow: hidden is used to crop the long photo strip and prevent it from stretching your browser window.
#container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.slideshow {
position: absolute;
z-index: 5;
top: 0;
width: auto;
height: 100%;
overflow: hidden;
white-space: nowrap;
}
.slide {
display: inline-block;
height: 100%;
}
#about-slideshow {
right: 0;
-webkit-animation: slideshow-right 10s linear infinite;
animation: slideshow-right 10s linear infinite;
}
#about-slideshow .slide {
width: 964px;
background: url('http://simplegrid.cochranesupply.com/images/slideshow-a.jpg') 0 0 repeat-x;
background-size: 101%;
}
/* the animation */
#-webkit-keyframes slideshow-right {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(33.33333333333%);
}
}
#keyframes slideshow-right {
from {
transform: translateX(0);
}
to {
transform: translateX(33.33333333333%);
}
}
My problem: After looking at it thoroughly on an iPhone 5S and iPhone 6 Plus, it seems to not start sometimes. It'll just sit there. Maybe glitch out after a while. If I continue to refresh, it will sometimes run, and sometimes not. Seems completely inconsistent.
Any ideas on what could be causing this? Seems pretty simple.
Here's a CodePen that I've confirmed displays the issue on iOS Safari: http://codepen.io/arickle/pen/pvGJBM
Here's a full screen view to pull up on an iOS device for testing (remember, keep refreshing until it stops--you don't have to refresh particularly fast or anything): http://codepen.io/arickle/full/pvGJBM/
Well, I appear to have stumbled upon a workaround at least. Apparently, if mobile Safari hiccups on anything during load, or can't keep up, or something, it won't start the animation. My solution was simply to delay the animation by 0.1s. This gives the browser enough time to get everything loaded and then start the animation, every time.
-webkit-animation: slideshow-right 10s 0.1s linear infinite;
Silly.
I created page transitions for sliding in from the right and from the left using CSS similar to this (Below). I got the idea from MDN CSS Animations.
/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
*/
.slidein-from-right {
animation: slidein-from-right 500ms;
}
#keyframes slidein-from-right {
from {
margin-left: 100%;
width: 300%;
opacity: 0;
}
to {
margin-left: 0%;
width: 100%;
opacity: 1;
}
}
.slidein-from-left {
animation: slidein-from-left 500ms;
}
#keyframes slidein-from-left {
from {
margin-right: 100%;
width: 300%;
opacity: 0;
}
to {
margin-right: 0%;
width: 100%;
opacity: 1;
}
}
This works well for pages sliding in from the right. However, sliding in from the left does not work (because the containing div is float left). I tried absolute positioning and other things for slide in from the right and slide in from the left page transitions, but there is always something wrong. For example, float right causes elements to be too far to the right. With other options I can't get the page centering, margins, and padding to be correct.
What is the best way to do this? Supporting just modern browsers is fine.
You can use jquery mobile page transistions, which are great.
Or you can use CSS transformations like this. Don't mess with the design layout of your page. Just transform it! Please note that as of this writing, CSS transforms are experimental, but test out well in recent browsers (FF29, Chrome 35 and IE11).
/* -webkit-, -moz-, -o- vendor prefixes omitted for brevity.
See http://css-tricks.com/snippets/css/keyframe-animation-syntax/
*/
.slidein-from-right {
-webkit-animation: slidein-from-right2 500ms;
}
#-webkit-keyframes slidein-from-right2 {
from {
opacity: 0;
-webkit-transform:translateX(100%);
}
to {
opacity: 1;
-webkit-transform:translateX(0%);
}
}
See working example at this plunker: http://plnkr.co/edit/EUPuHN. (If you want to rip the CSS code, copy it from the plunker... it has all the vendor prefixes)
I am using marquee scroll from right side to the left. The below code works fine. But its not scrolling smoothly. The content "Hover on me to stop" is blinking or flashing. I need a 100% smooth scroll for the below marquee. Please help me. Whether it is possible without javascript??
<marquee behavior='scroll' direction='left' scrollamount='3' onmouseover='this.stop()' onmouseout='this.start()'>Hover on me to stop</marquee>
If you wish to try it using pure CSS then this is the easiest approach. Though you need to check the support for older browsers and do add vendor prefixes.
.marquee-parent {
position: relative;
width: 100%;
overflow: hidden;
height: 30px;
}
.marquee-child {
display: block;
width: 147px;
/* width of your text div */
height: 30px;
/* height of your text div */
position: absolute;
animation: marquee 5s linear infinite; /* change 5s value to your desired speed */
}
.marquee-child:hover {
animation-play-state: paused;
cursor: pointer;
}
#keyframes marquee {
0% {
left: 100%;
}
100% {
left: -147px /* same as your text width */
}
}
<div class="marquee-parent">
<div class="marquee-child">
Hover on me to stop
</div>
</div>
A little late to the party..
There's an angular directive for this: https://github.com/davidtran/angular-marquee. You don't touch any js - just add the directive tag and you're done
<div angular-marquee></div>
And it doesn't fall back on the "deprecated tag" argument, relying on modern solution