so I'm having problem with animation pulse in Microsoft Edge, at first I will describe what my goal is: my animation is pulsing dot (changing widht,height) in the middle of site. Everywhere it works perfect but in Edge the dot (while it animates) it's also dissapearing for a milisecond couple of times.
HTML SNIPPET
<div class="wrapper__index">
<img id="dot" class="wrapper__dot" src="images/pulsing_dot.svg" alt="Click to enter site">
</div>
CSS SNIPPET
.wrapper__index {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
#dot {
align-self: center;
max-width:100%;
max-height:100%;
}
/****Dot animation*/
#keyframes pulse {
from {
width: 70px;
height: 70px;
}
to {
width: 90px;
height: 90px;
}
}
#dot {
animation: pulse 1200ms ease-in-out infinite alternate;
}
I don't know why Edge has this problem with svg but apparently changing animation to just plain CSS (not including svg) solves that.
Related
In one of my website pages, I would like to add a picture with a dynamic size.
To do this, I follow the excellent tutorial of W3school : link
This method works perfectly on Safari and Chrome; but gives me an error on firefox..
Doing the analysis of the containers sizes, I thought the calculation seems to be different..
First, here is the Chrome and Safari method:
Red block has a width of 50% (respect to the blue one)
Red block has a height of 40% (because we also use the width of the blue one as basis for % calculation)
Then, in firefox it gives me this result :
Red block has a width of 50% (respect to the blue one)
Red block has a height of 40% of the height of the blue one, and not 40% of his parent width !
body {
background-color: blue;
}
.home_box {
margin: auto;
margin-bottom: 40px;
width: 90%;
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
flex-direction: row;
}
#home_picture {
width: 32%;
height: 0px;
padding-top: 18.1%;
background-color: red;
/*background: url('../Img/picture.jpg') no-repeat;
background-size: contain;*/
}
.home_box p {
width: 68%;
}
<div class="home_box">
<div id="home_picture"></div>
<p>Lorem ipsum</p>
</div>
Could you help fixed this issue please ?
Perhaps it's a problem with your Firefox version. When I run this code (slightly tweaked from yours and shown below) on Firefox 72 I get an output shown in the image below, same as what I get in old Microsoft Edge, Chromium-based Edge and Safari. Is the output correct?
body{
background-color: blue;
}
.home_box
{
margin: auto;
margin-bottom: 40px;
width: 90%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-direction: row;
}
#home_picture
{
width: 32%;
height: 0px;
padding-top: 18.1%;
background-color: red;
background-size: contain;
}
.home_box p
{
width: 68%;
}
<div class="home_box">
<div id="home_picture"></div>
</div>
I have a weird bug on Edge browser.
Scenario
I have a filter applied to an image to make it greyscale and inverted, which is removed upon hovering on the image. However these are only shown upon a hover "max-height" transition to the parent container, so it has a drop-down effect.
Issue
When the parent container drops down, it only partially renders the image. On my live site it can load anywhere between 10% and 90% of the image as the drop-down is a lot longer and these images are at the bottom, however in my example below it only renders the very top of the image so you can just make out the top of the image.
The issue is rectified by removing either the transition from the parent container, or by removing the filter from the image. It would appear that both of these things together are causing the issue.
Live Example (Fiddle & Snippet)
JSFiddle
html, body {
height: 100%;
width: 100%;
}
body {
background: grey;
}
body:hover .sfHeader-companiesLinks {
max-height: 200px;
}
.sfHeader-companiesLinks {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
height: 50px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.17, 0.04, 0.03, 0.94)
}
.sfHeader-companiesLink {
-webkit-box-flex: 1;
-webkit-flex: 1 0 0px;
-moz-box-flex: 1;
-moz-flex: 1 0 0px;
-ms-flex: 1 0 0px;
flex: 1 0 0px;
-webkit-filter: grayscale(100%) invert(100%) drop-shadow(0 0 5px rgba(41, 41, 44, 0.5));
filter: grayscale(100%) invert(100%) drop-shadow(0 0 5px rgba(41, 41, 44, 0.5));
background-repeat: no-repeat;
background-size: 100% 100%;
height: 50px;
max-width: 150px;
text-align: center;
}
.sfHeader-companiesLink:hover,
.sfHeader-companiesLink:active,
.sfHeader-companiesLink:focus {
-webkit-filter: unset;
filter: unset;
}
<p>Hover over the body</p>
<div class="sfHeader-companiesLinks">
<a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/ebay"></a>
<a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/amazon"></a>
<a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/magento"></a>
</div>
Things tried (and failed)
Making the image an img element instead of a background image
Making the filter only apply when the body is hovered
Issue recreation
I realise perhaps those on fruit flavoured OS may not be able to reproduce, so I created an animated GIF of the issue:
Conclusion
I'm looking for any sort of workaround to allow me to keep this functionality. All mad suggestions will be taken into consideration! I'm well aware that the filter doesn't work in IE11 anyway. Seems to work correctly in both Chrome and Firefox. Thank you.
That bit of functionality ended up being removed in the end, however the Microsoft Edge Team are now on the case:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10423235/
I have ul element with display:flex and anchor inside li element with display:flex but text in anchor is getting truncated when width is restricted.
Test case:
http://jsfiddle.net/ypfcjfk8/4/
HTML & CSS markup
Home
Getting Started
Long LabelLong LabelLong LabelLong Label
Contact us
Support
Home
Getting Started
Long LabelLong LabelLong LabelLong Label
Contact us
Support
.list-element {
display: flex;
flex-direction: row;
min-height: 2.71429rem;
}
.list-item-element {
display: block;
flex: 1 1 auto;
padding: 10px;
}
.list-item-content {
display: flex;
flex: 1 1 auto;
}
.list-item-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#test {
width: 300px;
overflow: hidden;
border: 1px solid red;
}
Expected behaviour: it should truncate whole list not individual item.
Expected output screenshot:
This works fine on ie 11 and Firefox, chrome but not on safari. Any help is much appreciated. Thanks in advance.
You have to use proper flex declarations for all browsers. Following code block made your fiddle look good in my Safari (win8).
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
Check this page out: https://css-tricks.com/using-flexbox/
I have the following HTML and css that works great in Firefox and Chrome to create a 3-column grid of boxes. But, in Safari it takes all the boxes and puts them into 1 row, squishing the width of each one so it will fit instead of allowing the float to push the boxes to a new line.
How can I get it to looks the same in Safari, any ideas?
(note: the html class '.box' is in a loop that dynamically generates boxes based on user input, so the number of boxes is variable)
HTML:
<div id="home-grid">
<div class="box">
Contents of box
</div>
</div>
CSS:
#home-grid {
margin-top: 20px;
float: left;
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */
display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
flex-flow: row wrap;
justify-content: space-between;
width: 100%
}
#home-grid .box {
position: relative;
float: left;
width: 192px!important;
height: 180px;
border: 1px solid #F73987;
margin-bottom: 20px;
overflow: hidden;
}
I was able to get it to work in the latest version of Safari by adding these two lines:
-webkit-flex-flow: row wrap;
-webkit-justify-content: space-between;
see jsfiddle
Just to clarify, Safari still needs the -webkit prefix, according to caniuse.com
I'd like to place an <img> with known width and height to the left, a <div> with known width and height to the right, and a <div> that will fill up the width in between the above <img> and <div> and flexibly stretch in height depending on the content. How can I achieve this without Javascript?
You can use a flexBox model to archieve this, this is a css3 module soported by all modern browser and some old browser with polyfill.
this is an example of this.
.container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.fixedWidth {
width: 100px;
height: 100px;
margin-right: 20px
}
.flexibleDiv {
-webkit-box-flex: 1;
-moz-box-flex: 1;
width: 80%;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
http://fiddle.jshell.net/2y1c5deL/
This is a Flexbox polyfill
https://github.com/doctyper/flexie
You don't need flexbox for this. You can position the <img> and <div> left and right by applying respective float value and stretch the middle <div> by applying position absolute and giving leftand right values equal to the width of the element at the respective side.
Regarding the height, unless explicitly specified, absolute positioned elements shrink wrap to fit their content by default so you don't have to worry about it:
* {
margin: 0;
padding: 0;
}
.fixed {
width: 100px;
height: 100px;
background: hotpink;
}
#left {
float: left;
}
#right {
float: right;
}
#flexible {
position: absolute;
left: 100px; /*width of image*/
right: 100px; /*width of div*/
background: dodgerblue;
}
<img id="left" class="fixed" src="http://cdn-media-2.lifehack.org/wp-content/files/2014/10/widescreen-adam-levine-background-1024x640.jpg" />
<div id="flexible">Some Content</div>
<div id="right" class="fixed"></div>