Angular 14 fails to adhere to browser compatibility as it utilizes the CSS inset property despite lack of support

My app is developed using Cordova/Ionic, Angular 14. While everything works perfectly on Chrome and iOS, I am encountering issues with the Android webview not supporting the CSS inset property. This causes problems as Angular converts top: 0; ... to inset: .... I have tried but failed to resolve this.

The following css is found in a xy.component.scss file:

::ng-deep sc-modal-wizard-page > div:not(.defines-height) {
    position: absolute;
    top: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    overflow: auto;
}

Angular compiles it to:

sc-modal-wizard-page>div:not(.defines-height){position:absolute;inset:0;overflow:auto}

However, when running the app on Android (emulator or physical device), the positioning does not work. WebView debugging indicates that inset:0 is rejected as an 'invalid css value'.

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

Manually adding the values for left, top, bottom, right through DevTools solves the problem temporarily.

Android System WebView version is 83.0.4103.106. Considering that chromium version 83 doesn't support inset and Chrome started supporting it from version 87, this behavior makes sense.

I've been attempting to make Angular compile correctly by adding a .browserslistsrc file and the necessary package (npm i browserslist). I configured the file for compatibility with all versions of Chrome:

# This file helps autoprefixer adjust CSS to support specified browsers
Chrome >= 0
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
# IE 9-11

Despite this, the output still includes the inset property. How can I get Angular to compile the application while considering the browser capabilities specified?

cssangularandroid-webviewangular14browser-support

Answer №1

I've encountered a comparable problem.

In my situation, an outdated Safari version was causing issues. Adding this to .browserslistrc resolved the problem:

ios 14

Answer №2

To work around this specific issue, one solution is to alter the CSS rule that applies to top, right, bottom, left by using !important. Since the use of inset does not provide a suitable alternative, the explicit properties need to be preserved during compilation:

::ng-deep sc-modal-wizard-page > div:not(.defines-height) {
    position: absolute;
    top: 0px !important;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto;
}

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

A complete div component with a minimum height that is sandwiched between a fixed size header and

I'm currently facing a challenge with setting up my webpage due to the height of my elements causing a bit of a frenzy. Specifically, I have a specific layout in mind: At the top, there should be a header that has a fixed height (let's say 150p ...

htmlcss

Angular4 - Streamlined error tracking and management for all HTTP requests

I have created a customized wrapper class for handling all my http requests. The example provided only includes the get function: import { Injectable } from '@angular/core'; import { HttpClient, HttpParams, HttpResponse, HttpHeaders } from &apos ...

angulartypescriptrxjsangular-httpangular2-observables

Transforming Typescript Strings into ##,## Format

As I've been using a method to convert strings into ##,## format, I can't help but wonder if there's an easier way to achieve the same result. Any suggestions? return new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, max ...

angulartypescript

Tips for displaying a title within the border of a div

We have a client who is asking for a unique feature on their new website - they want the title to appear within the border of a text area. We need help figuring out how to achieve this using CSS/HTML. Take a look at the effect we are trying to create: htt ...

htmlcssbordertitle

Is it possible to append the .active class to a div upon clicking a button?

I'm using bootstrap's tab system to create a "set up your account" page. The steps are displayed at the top of the page above the tab-panes. When a user clicks on an option in step one, it loads the step two tab and adds the active class to the c ...

jqueryhtmlcsstwitter-bootstrap

Div that adjusts according to the width of an image

I have some images of a laptop and a tablet displayed on my webpage. The issue I am facing is that the div above the laptop should always match the width of the laptop. Everything looks great at full width, but problems arise when I scale down the window s ...

cssbootstrap-4css-positionresponsive

Encountering a type error when using types/d3-array

There was an ERROR in the TypeScript file: node_modules/@types/d3-array/index.d.ts on line 36. The error states: "error TS2574: A rest element type must be an array type." The code causing the issue is as follows: export type NestedInternMap<TObject, T ...

angulartypescript

What is the best way to build a personalized discussion platform: employing tables, <ul> <li>, <dl> <dt>, or div elements?

Looking to create flexible columns and rows with borders on the left and right of each column. If one row in a column stretches more, the other columns in that row should also stretch accordingly. Came across liquid 2 column layouts and 3 column layouts, b ...

htmlcss

Guide to updating the button's color when clicked

I need to change the color of an iconic button when it is clicked. The default color is the primary color, but when the button is clicked, it should change to red. This functionality is working correctly. After clicking the button, two hidden buttons shoul ...

htmlcssangulartypescriptangular6

Ways to remove scroll bars from a textarea in JavaFX

Is there a way to disable the scrollbars on a TextArea element? I managed to remove the horizontal scrollbar by using: TextArea.setWrapText(true); However, I am struggling to disable the vertical scrollbar - all I can do is hide it. My goal is to hav ...

javacssjavafx

Is it considered secure to encase a function within jQuery's removeClass()?

I'm currently developing a unique slider that includes a dynamic video element. With each slide transition, a new video is added to the DOM while the previous one is removed. To achieve this effect, I am utilizing CSS transitions along with a specific ...

javascriptjquerycss

Avoiding the dreaded Pyramid of Doom in Angular by utilizing rxjs .subscribe to reduce the number of nested .subscribes

I've been diving into the wonders of RxJS's .merge lately, but I thought I'd throw my question out here too because the explanations are usually top-notch. So, here's the scenario: I have a form that triggers a modal window based on us ...

angulartypescriptrxjsobservable

Troubleshooting Bootstrap Grid Alignment Problem During Zooming

I'm facing an issue with the alignment of my bootstrap grid. Currently, I have three main columns in my layout - one for the left sidebar, one for the blog posts, and one for the right sidebar. My challenge lies in trying to add a yellow bar on top ...

csswordpress-themingbootstrap-4

What is the best way to get three columns of images to align in a single row?

I'm currently working on setting up a portfolio section for a website I am developing using Bootstrap. Unfortunately, I've run into an issue where the third item in my lineup keeps jumping to the next line and I can't figure out how to fix ...

htmlcssweb

Error message: "Angular requires either importing or local installation"

For my ionic application development, I encountered an issue while trying to link pages together in the ionic creator. The error message on the .ts file is: typescript: src/pages/home/home.ts, line: 4 Individual declarations in merged declar ...

angulartypescriptionic-frameworkionic3

The auto setting in the CSS clamp function is not functioning properly when used as the minimum, value,

I have been trying to use the css function clamp() to control the height of my div, but for some reason it is not behaving as I expected. .container{ height: clamp(200px, auto, 400px); } Interestingly, it works perfectly fine when I define the heights ...

htmlcssclamp

Addressing Overlap Issues in Angular 7 with NGXS and Firestore

Currently, I have a process in place where I retrieve data from Firestore and then update the state with it. Additionally, I make use of the NGXS Storage Plugin. While everything is functional, it does appear to be redundant. My approach involves a combi ...

angulararchitecturegoogle-cloud-firestoreangular7ngxs

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

javascriptjquerycssresizablejquery-ui-resizable

Combine values in CSS without any spacing

Currently, I am attempting to create a LESS mixin that can take a numerical value (degrees for rotation) and generate the appropriate CSS code to rotate an element. However, I am facing difficulties trying to handle both "270deg" and the integer "3" (which ...

cssless

Issue with Google Chrome not showing stylesheets on Windows 7

Recently, I've been facing an issue with CSS layers on my website while using Google Chrome. Despite following the code accurately, my browser fails to display the expected result. To troubleshoot, I even copied and pasted code from a reliable source ...

htmlcssgoogle-chrome