Safari failing to resize items

We have encountered an issue while building a responsive website using Rem values. The site performs flawlessly in Chrome, scaling perfectly as expected. However, when we tested it on Safari, the scaling did not occur. Here is a JSFiddle that demonstrates the problem. In Chrome, resizing the browser width will cause the text to resize accordingly, but in Safari, the font size remains static.

It seems odd that Safari lacks this functionality. Has anyone faced a similar issue and found a solution?

Thank you

Answer №1

Unfortunately, Safari & iOS Safari versions 6 and 7 do not have support for using viewport units like vw or vh within the calc() function. Check out this link for more information under the section titled known issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Flexbox for Creating Horizontally Aligned Boxes with CSS

My goal is to arrange the explanation and participation sections as flexboxes, positioned side by side. Below them, I want the benefits and requirements sections stacked on top of each other. I have attempted to use flex-direction:row; for the explanation ...

Discover the power of the jQuery :closest() CSS selector in your

Looking for a CSS selector equivalent to the $.fn.closest() function, such as: $('.wrapper:eq(0)>h1>strong:closest(.wrapper)') The goal is to have the implementation return the .wrapper element that is the first on the page, containing an ...

Should PHP be avoided in CSS files?

I've recently developed a CSS page named style.php and at the beginning, I included this line: <?php header("Content-type: text/css"); ?> What are your thoughts on this approach? Is it considered a bad idea? The reason behind doing this is tha ...

Is there a way to utilize Bootstrap 5 to ensure that a tab in a navbar occupies the entire vertical space?

After implementing a bootstrap navbar with a hover effect, I encountered an issue where clicking on a tab would change the color to white but leave a black margin behind. Check out how it currently looks: how it is And here's how I'd like it to ...

How can I overlay text on a background image smoothly?

Currently, I am in the process of developing a website optimized for mobile devices utilizing jQuery Mobile, HTML, and CSS. After successfully setting a background image, I encountered an issue regarding its stability while scrolling. Although the "backg ...

Website not displaying properly on Chrome for Mac operating system

Recently, I started using my Macbook for web development and noticed that the websites I create appear differently and glitched compared to Windows. You can see examples below. Does anyone know why this is happening and how to resolve it? View on Mac Vie ...

My button is overflowing its container in Bootstrap 5, how can I fix this issue?

I've been experiencing an issue with the button in my code. It keeps extending outside of the parent div container, regardless of the screen size. <header class="header"> <div class="hero text-white pt-7"> <div ...

Setting the maximum height for a div element

Struggling to understand how a div can occupy the entire height of a container. In this particular scenario, I am aiming for the "photo" div to take up the full height, with the yellow and green content appearing on the right side of the photo. Below is th ...

Troubleshooting alignment issues with flexbox in Internet Explorer 11 and Microsoft Edge

After creating a well-designed ordered list of questions on my website using Bootstrap 4 and flexboxes, I encountered an issue with strange top padding in IE11 and Edge browsers. The list displays perfectly in Firefox and Chrome, but the formatting is off ...

The 'each' method in Jquery cannot be used on a DOM that has been dynamically loaded using Ajax

Trying to refresh a Google advertisement located within divs that all share a common CSS class called 'adslot'. Some of these divs are loaded via ajax. However, upon document ready, using the jQuery each function only applies to the divs that wer ...

Nightwatch is a tool that allows you to interact with elements on a webpage by clicking on an element within

I have a scenario on my website where I have two separate div elements: <div class="wg-block" data-reactid="10" <div class="wg-header" data-reactid="11"/div> .... <h4 class='condition'> "Text" </h4> <div cl ...

Create an event listener for clicking on an image that potentially has a corner ribbon obscuring a portion of it

In my project, there is a div element with an id of items containing several bootstrap cards. Each card includes an image tag and some are accompanied by the following HTML code: <div class="ribbon"><span>Sale</span></div> This co ...

Learn the technique for creating line drawings with SVG elements or by utilizing HTML div elements

In my app, users can easily generate a request for creating an email with the organization's domain instead of filling out forms manually on paper. Once the form is filled out and submitted, it goes through an approval process starting with HR departm ...

a fixed width layout with two columns aligned at the top

I've been struggling to design a two-column, top-aligned layout with fixed width for data that will be inserted into text in a WebView for an iPhone app. The first column needs to have a set width so the items in the second column can align perfectly. ...

Is it possible to trigger an ng-click event while the md-backdrop is present in Angular Material?

In my Angular Material website, a context menu pops up with an md-backdrop whenever the md-menu is shown. Clicking outside the md-menu closes it by triggering the md-backdrop click event. However, I would like to capture that ng-click event. For instance, ...

Reveal concealed content when hovering over it

Is there a way to make a hidden div with a button visible when hovering over the 'person-wrap' div? Should I rely on CSS tricks or utilize JQUERY for this task? You can check out the JSFIDDLE example here: http://jsfiddle.net/ceTdA/3/ The desir ...

Position the scrollbar on a webpage using CSS

I am trying to customize the scrollbar on my webpage by changing its position and specifying a set height, such as 400px. Currently, I can achieve this by adding padding/margin and adjusting the body's position. However, this solution disrupts the po ...

What is the best way to disable the appearance of an HTML checkbox?

Is there a way to make a checkbox readonly, but still have it appear disabled or grayed out? I want it to function like this: <input type="checkbox" onclick="return false;"> If anyone knows how to accomplish this, please share yo ...

How to delete a specific section of HTML code while retaining the styling using Python

I need help figuring out how to remove a specific portion of an HTML code that contains a certain string. The section I want to remove includes a person's name, and I want to delete the entire tag to maintain anonymity. Here is the HTML snippet: < ...

Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving ...