Troubleshooting Border Width Problem in Safari Version 9.1.3

Question

Troubleshooting Border Width Problem in Safari Version 9.1.3

It seems like there is an issue in Safari 9.1.3 where the border width on elements with a specific combination of styles is causing unexpected outcomes. Essentially, I am using a transform on an absolutely positioned element to achieve horizontal centering on an element with variable width.

HTML:

<div class="border">
    <div class="border__text">
        test
    </div>
</div>

CSS

.border {
  position: absolute;
  left: 50%;
  padding: 50px;
  border: 1px solid #666666;
  transform: translateX(-50%);
}

.border__text {
  font-size: 12px;
  font-style: italic;
  font-family: "Times New Roman", Times, serif;
}

Screenshot

https://i.sstatic.net/xD3Xg.png

Codepen

Give it a try in Safari 9.3.1

I have been able to make it work by adjusting the font size to either 11 or 13 pixels, but my preference is for it to be at 12 pixels. Additionally, removing the transform allows it to work, but I'm struggling to find another simple way to horizontally center an absolutely positioned element.

html css safari webkit

Answer 1

Answer №1

Instead of using the transform property, you can achieve the desired effect by following this approach:

.border {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.border__text {
  display: inline-block;
  font-size: 12px;
  padding: 10px 50px;
  border: 1px solid #666666;
}

<div class='border'>
  <div class='border__text'>test</div>
</div>

Answer 2

Instead of using the transform property, you can achieve the desired effect by following this approach:

.border {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.border__text {
  display: inline-block;
  font-size: 12px;
  padding: 10px 50px;
  border: 1px solid #666666;
}

<div class='border'>
  <div class='border__text'>test</div>
</div>

Troubleshooting Border Width Problem in Safari Version 9.1.3

Answer №1

Similar questions

What is the best way to handle media queries when determining the validity of both statements?

Is there a way to substitute the bootstrap in order to accomplish the same goal?

Achieving consistent height for Grid items in Material-UI

Efficiently Fill JQUERY Mobile Multi-Pages with Dynamic Content

Website Responsiveness - inquiries for all needs

Using the jQuery plugin multiple times within one website

To link circles vertically with a line and fill them with color when clicked, follow these steps:

What is the best way to implement an IF THEN ELSE statement using ngStyle in Angular?

Identifying broken links within a table through the onerror function

Guide to adding a theme switcher feature to your current React website

Optimizing web development: Employing HTML templates to dynamically enhance website performance

Changing the background color dynamically of a table header in Angular Material

Using Javascript to upload an image and show it in a small display

When you click on the text, it vanishes, but when you enter new text,

How come I can click on both radio buttons simultaneously?

Align the radio buttons vertically

Footer that sticks in a vuejs application

Sliding views in CSS using ui-router

Load subtitles into your video in real-time

Dynamic Loading of CSS Styles