Help me solve a strange bug in Safari. Googling directs me to his irrelevant old issue. For some reason, the rounded button that is promoted to a separate layer (via will-change: transform) is cut off at the bottom as shown in the image. Perhaps someone has come across this.
Styles of the button:
.button {
display: inline-flex;
position: relative;
text-align: center;
vertical-align: middle;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 9999px;
will-change: transform, color, background-color;
}
safari bug demonstration
Related
Giving that code:
.avatar {
font-size: 40px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 2em;
height: 2em;
border: .15em solid red;
border-radius: 50%;
overflow: hidden;
}
.avatar>img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="avatar">
<img src="https://thispersondoesnotexist.com/image" alt="avatar">
</div>
resulting avatar have pixels of parent element between border and own background.
They're better visible in smaller sizes (and zoom levels), but they also exist in higher zoom.
And here in firefox:
I think it's a bug, but I tested it on multiple browsers (chrome, chrome mobile, Samsung internet browser, Firefox) and in every there was some kind of this behavior.
I've tried setting background to border color, but this only image it's not the best solution, because image is still distorted.
Setting image as background helps in chrome, but only if there is no <img> selector, and I need it, to don't have accessibility issues.
You know how to repair this? Or where to find bug ticket for this?
Having a little trouble removing a very thin border that is appearing around our :before and :after elements. This only seems to appear on a mobile device - doesn't even pop up in Chrome's device tools.
Problem:
Here's how the HTML/CSS looks.
.container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 100px 0px;
margin-bottom: 56px;
width: 100%;
}
container:after {
content: "";
background-image: url("$asset");
background-size: cover;
background-position: bottom;
position: absolute;
left: 0;
top: -15px;
width: 100%;
height: 16px;
border: 0;
outline: 0;
}
<div class="container">
<div class="bg"></div>
<section>
//Headings and Links here
</section>
</div>
I've tried making absolutely sure borders and outlines are set to none - and also adding and taking away a pixel or two from the top and bottom margins, but nothing really seems to work. It's also a bit inconsistent, the lines don't necessarily show on every page that the component is on.
Replace border: 0; with: border: none; very simple CSS Code. Also, the outline code is just for things like text, this has nothing to do with the border.
It's a chrome bug lads. Second answer here nailed it.
The solutions is reducing the height/width to 0 and putting padding in to account for the space instead. Seems to have worked in my case.
I am using the swiper.js as an infinite carousel used for an image select. One image on each page. When you select an image, it dims, and a checkmark appears.
This works perfect on every browser but iOS 10 webkit. It also gets broken even more in iOS Chrome which is an older version of Safari. To make matters worse, the MacOS Safari developer tools give me a completely different result. I'm totally lost here.
What could be causing the checkmark not to center responsively in Safari?
Not on Safari -- Everything Works!
Safari -- The checkmark moves around the screen when scaled.
HTML
<div class="swiper-slide">
<div>
<img class="imageselection" src="img/1.jpg">
</div>
<div class="checkmark">
<img src="img/checkmark.png">
</div>
</div>
CSS
.checkmark {
visibility: hidden!important;
position: absolute!important;
}
.checkmark.checkmarkon {
visibility: visible!important;
position: absolute!important;
transition: .03s ease!important;
opacity: 1;
}
.imageselection {
position: relative !important;
margin-top: 0%!important;
}
img.imageselection.opacity {
opacity: 0.3;
}
First, everyone who downvoted me can DIAGF. You are all dicks.
Secondly, WebKit is backwards. My problem stemmed from poor Apple documentation, and a lack of general WebKit information. It would be great to ignore it, but if you want something to work on iOS you should probably start there as other engines adapt better than the other way around.
Finally, the answer was found here: https://codepen.io/shshaw/full/gEiDt
Someone who definitely is a good human, with a soul.
The relevant code change was this:
.checkmark {
visibility: hidden!important;
position: absolute!important;
margin: auto !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto%;
display: -webkit-box !important;
display: -ms-flexbox!important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
-webkit-justify-content: center !important;
justify-content: center !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
-webkit-align-items: center!important;
align-items: center!important;
}
You hopefully can ignore the !importants :-). I'm too lazy to edit the core css of the swiper.js and onsenui framework.
I would like to vertically center font awesome element in a box (div). I almost do it, however icons are not precisely centered. Only the second one looks ok. I have added the red axis of symmetry to illustrate the differences. What is the issue and how can I fix it?
.icon-wrap a:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.icon-wrap a {
display: inline-block;
width: 110px;
height: 110px;
text-align: center;
overflow: hidden;
margin: 0px auto;
border: 6px solid black;
border-radius: 100%;
text-decoration: none;
}
...
Here's my code working in a fiddle
Actually, the plus-square-o icon seems to be built that way in Font Awesome. That's why 2 others are pretty well aligned and the first one is not.
If you hover on this icon in Font Awesome you can see it's not the same alignment as the one plus-square.
So, in this case you can either change the icon (to align each icon perfectly) or you can manipulate only on the first <div class="icon-wrap">.
Something, like this:
.icon-wrap:first-child .icon-holder {
padding-top: 5px;
}
Here's an updated jsfiddle to that.
I'm playing around with display: inline-flex css property and see completely different behaviour for the same layout in Firefox and Chrome:
Here's how blocks are stacked in Firefox:
And here's how it looks like in Chrome:
So, Firefox is working as expected (at least by me), and Chrome increases the width of container for some misterious reason.
My question is - what behaviour meets specification and how I can make Chrome to render blocks just like Firefox does.
For the sake of self-completeness, here's css code from codepen snippet I've provided link to:
body {
font-family: Century Gothic;
}
.adder {
display: inline-block;
vertical-align: top;
}
.stage {
height: 200px;
background: linen;
overflow: visible;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
}
.job {
height: 50px;
width: 100px;
background: white;
color: black;
border: 1px solid black;
}
.job:nth-child(2n) {
background: black;
color: white;
border-color: white;
}
I took the time and went over to CodePen, turns out your problem lies in the css, If you change "display:inline-flex;" to "display:flex;" AND "align-items:flex-start;" to "align-content:flex-start;". I have tested the code and it definitely works on all but safari, I have tested every way I can think of to get it to work, but to no avail.
Athena
P.S. On a side note your missing a semicolon in your JS...