Flexbox and absolute positioning not working in Chrome and Safari

Question

I have a button class with the following styles:

.button {
  align-items: center;
  background-color: #fff;
  border: 2px solid;
  border-color: #f48120;
  color: #f48120;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}

.button::after {
  background-color: #fff;
  bottom: -4px;
  content: '\f111';
  display: flex;
  font-family: 'FontAwesome';
  font-size: 5px;
  justify-content: center;
  position: absolute;
  width: 25%;
}

<button class="button">Enviar</button>

If I uncheck and then check again the "position: absolute" attribute in the inspector, the circle gets aligned in the center. Is this a Blink/Webkit bug?

score 3 · Accepted Answer · answered Apr 02 '18 at 19:49

3

Absolute elements wont get positioned by the parents aligns. Just position it with left and transform it to center it.

just a sidenote, there is no need to use display: flex; on the absolute element.

.button {
  align-items: center;
  background-color: deeppink;
  border: 2px solid;
  border-color: aqua;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}

.button:after {
  content: '';
  background-color: deepskyblue;
  bottom: -4px;
  font-size: 5px;
  position: absolute;
  width: 25%;
  height: 10px;
  left: 50%;
  transform: translateX(-50%);
}

<button type="button" class="button">Submit</button>

answered Apr 02 '18 at 19:49

Dejan.S

18,571
22
69
112

Thanks! It worked. However, I think this is more like a workaround, because according to [this](https://developers.google.com/web/updates/2016/06/absolute-positioned-children) the styles should be working as I had them. You were right about using `display: flex` (I was trying to center the circle); `text-align: center` does the job. – Juan S. Apr 02 '18 at 20:10
@JuanS. My solution is not a workaround, thats how you position absolute items and have forever. The article you reference will only apply browsers that are compatible with it, I would guess the IE and Edge are in that category. – Dejan.S Apr 03 '18 at 07:04
1

Yes, you're right, sorry. I was confused about how the element was being positioned. `left` positions the element relative to its parent and `translate` relative to itself, which does make sense. – Juan S. Apr 03 '18 at 13:09

Michael Benjamin · Answer 2 · 2018-04-02T20:59:50.380

Four things to consider:

Flex items that are absolutely-positioned do not accept flex properties from the parent. Because they are out-of-flow, absolutely-positioned children of a flex container are removed from a flex formatting context and return to a block formatting context (or other box model).
HTML <button> elements cannot be flex containers.
Absolutely-positioned flex items may not be removed from the normal flow in some browsers.
Center text over an image in flexbox

Flexbox and absolute positioning not working in Chrome and Safari

2 Answers2