Polyfill failing to function properly

I'm currently in the process of developing my own starter framework. Check it out here

Before anything else, I'd like to apologize for the extensive list of CDN plugins. Right now, my focus is on creating some custom CSS overrides for commonly used scripts to make them easier to style for different projects.

One challenge I've encountered is achieving REM support in IE8. I am aware that it's not natively supported, so I attempted to utilize this polyfill. Unfortunately, it doesn't seem to be functioning as expected.

Below is my IE conditional stack:

<!--[if lt IE 9]>
    <link rel="stylesheet" href="/library/css/ie-old.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
    <script type="text/javascript" src="/library/polyfills/rem.js"></script>    
<![endif]-->    

<!--[if lte IE 9]>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.0.8/jquery.placeholder.min.js"></script>
    <script type="text/javascript">
        $('input,textarea').placeholder();
    </script>
<![endif]-->

The conditional statements are loading resources as intended, with respond.js successfully enabling media queries, but the REM functionality remains inactive.

If anyone has any suggestions or recommendations, I would greatly appreciate it.

Answer №1

discovered that the issue was due to a problem with typekit, just sharing in case it can assist someone else

Answer №2

I encountered a similar problem, but in my case, it was related to the Google Font API. The issue arose because the REM Polyfill was attempting to make adjustments to the Google CSS file, encountering errors, and then failing to rectify the subsequent stylesheets. I managed to resolve the issue by including data-norem to the problematic link.

<link href="http://fonts.googleapis.com..." rel="stylesheet" type="text/css" data-norem>

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

place another ionic3 button adjacent to the existing one

I was looking to position a button next to another one, rather than below it <ion-row> <span *ngIf="dado.status == 0" style="margin-left: 50%"> Pending </span> ...

Using React Native to showcase a background grid of dimensions {height: 10, width: 10}

Hey there! I'm looking to create a grid that can adapt to different device sizes and screen positions, similar to a chess grid. I want to use this as a background to help with sizing and positioning elements like text and images on the screen. Here&a ...

What is the best way to incorporate navigation options alongside a centered logo?

Looking to create a unique top header layout with the logo positioned in the center and navigation options on both sides. Below is the initial code, but unsure how to proceed further. Any suggestions on achieving this design? <div class="header"> ...

Transform a Linear Gradient in CSS into a Stylish Bootstrap Button in HTML

I've crafted an American football field using only CSS. In my Codepen sandbox, you can find the code (I'm utilizing ReactJS). What I'm aiming to achieve is to convert each -webkit-linear-gradient into a clickable button that logs its positi ...

Is there a way to establish a universal font for all apps within ant design?

I am currently working with NextJS version 14 and I have the following setup: In my globals.css file, I have imported a Google font like so: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800& ...

Coat the div with a uniform shade of pure white

I need assistance on applying a solid white background color to hide the text behind it. For better understanding, I have attached a screenshot as a reference. https://i.stack.imgur.com/f8Qd9.png The issue arises when I click on the dropdown in the heade ...

Prevent side-to-side scrolling using the translate property

With Bootstrap 4, I successfully implemented a functionality where clicking a button hides/shows the sidebar on desktop, allowing the main content area to occupy the remaining space: HTML: <a class="sidebar-toggle" href="#"><i class="fa fa-bars" ...

Arranging circles on top of each other creates a dark line along the edges with rounded

I find myself entangled in quite the enigmatic venture. My latest project involves crafting a mouse that doubles as a 'torch / searchlight'. Whenever there is a hover action on any text (inline elements, buttons, and so forth), its color transit ...

Guide on aligning all list items to the left using React Material-UI, incorporating fontAwesome icons, and styling with Tailwind.css

I am trying to align the text of my list items to the left. Here is what I have currently: https://i.stack.imgur.com/a5o5e.png Is there a way to left-align the text in this code snippet? import React from 'react'; import PropTypes from 'p ...

Easy Navigation Slider with CSS3 and jQuery

I'm currently working on implementing a push menu on my website. The objective is to have the menu slide out from the left and overlap the current page content. I've written the code below but it doesn't seem to be functioning as expected. C ...

Is there a way to have my grid not apply grid-gap if a specific area is vacant?

I am working with a grid layout that has defined grid areas and a grid-gap, but some areas may not always have content. How can I prevent a double gap between items when an area is empty without changing the grid-template? For example: .grid { displa ...

Creating customizable Isotope objects using custom CSS margins that are influenced by the child-nth selector and JavaScript

My recent project involved creating a simple .isotope gallery, and when viewing the selected #portfolio-wrap container in Chrome Dev Tools, here is how it appears: Unfortunately, I am unable to upload three links here. Please visit this link for more info ...

Try placing the div class above the navbar in Bootstrap

I've created these fork me ribbons in CSS with the intention of placing them on top of the navbar, similar to the Github images. Here is how they currently appear: http://jsbin.com/womib/1 .ribbon { background-color: #F38419; overflow: h ...

Within the mobile view, a button with accompanying description will be discreetly concealed

Working on an ASP.NET Core MVC project, with a FAQ section in the view displayed as follows: <div class="container"> <div class="row "> <div class="col-xl-2 mx-auto d-none d-sm-block"> ...

Tips for using jQuery to dynamically apply CSS styles to new content added to a webpage

I have encountered this question multiple times on stackoverflow and through google search, but unfortunately none of the suggested solutions have worked for me. My issue involves a page that loads an HTML page with empty sections, which are then dynamica ...

Create a mobile-friendly thumbnail gallery in the center of the page

Check out my website: I am struggling to keep the thumbnail gallery centered on my site at all times. I have tried using the following CSS: text-align: center; On the parent element and setting thumbnails as: display: inline-block; But unfortunately, ...

When I click on a tab section to expand it, the carat arrows all point upwards. Only the arrows corresponding to the selected section should

click here for imageIt appears that there are four tabs, each with a click function on the carat icon. When I expand one tab, all carats point upwards instead of only the selected one appearing. accountSelection(account) { if (!this.selectedAccoun ...

Two divisions placed side by side

The current structure I am working with looks like this: <div id="container"> <div id="msg"><p>Lorem ipsum dolor sit amet.</p></div> <div id="img"><div id="content"></div></div> </div> # ...

hide input type with minimal display

Can someone help me find the less equivalent to this css code snippet? I'm not familiar with less and this code is part of a larger global css file that includes generated code from all less files. input[type="checkbox"] { display: none; } Any a ...

Exploring the Contrast between Using @import for Styles and js Import for Webpack Configuration

While delving into the source code of ant-design, I couldn't help but notice that each component has both an index.ts and a index.less file in the style folder. This got me thinking - why is JavaScript being used to manage dependencies here? What woul ...