Chrome erroneously assigns locality to values within CSSStyleSheet

Could there be a glitch in Chrome version 65.0.3325.146 on macOS High Sierra causing CSSStyleSheet to apply locale to its values? The code below demonstrates the issue, resulting in incorrect output for users with Russian system locale utilizing "," as the decimal separator.

<script>
var el = document.createElement('style');
el.innerHTML = '.someclass {font-size: 3.5rem; line-height: 1.5rem;}';
document.head.appendChild(el);
console.log(el.sheet.cssRules[0].style.cssText);    
</script>

The displayed output is:

font-size: 3,5rem; line-height: 1,5rem;

The expected output should be:

font-size: 3.5rem; line-height: 1.5rem;

A screenshot showcasing the problem (as viewed in the browser console):

https://i.sstatic.net/zvkPM.jpg

javascriptcssgoogle-chrome

Answer №1

Encountering some truly bizarre issues here.

The problem disappeared once I removed the following lines from ~/.profile and restarted Chrome:

export LC_NUMERIC=ru_RU.UTF-8
export LC_TIME=ru_RU.UTF-8
export LC_COLLATE="en_US.UTF-8" 
export LC_MONETARY=ru_RU.UTF-8
export LC_MESSAGES="en_US.UTF-8" 
export LC_PAPER=ru_RU.UTF-8
export LC_NAME=ru_RU.UTF-8
export LC_ADDRESS=ru_RU.UTF-8
export LC_TELEPHONE=ru_RU.UTF-8
export LC_MEASUREMENT=ru_RU.UTF-8
export LC_IDENTIFICATION=ru_RU.UTF-8
export LC_ALL=

However, when I re-enabled those lines, the issue did not resurface. I tried restarting Chrome and my system multiple times.

Restarting Chrome alone didn't resolve the issue prior to removing the lines. Perhaps a system reboot would have fixed it (although I didn't attempt that) :)

UPDATE: I ultimately discovered how to replicate the problem - by launching Chrome from Terminal with the aforementioned variables set (LC_NUMERIC, ...).

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

Leveraging the power of Angular's ng-repeat for iterating through multi-dimensional arrays

Currently, I am in the process of developing a game and utilizing NG repeat to dynamically insert divs based on the number of letters and words present. For instance, if the answer to a question in the game is "Clean Sheet," I would like NG-Repeat to gener ...

javascriptangularjsarraysangularjs-ng-repeat

Building relational meteor databases for hierarchical structures

Hey there, I'm diving into the world of Meteor and Mongo and I've got some basic questions on designing databases. Imagine I'm creating a turn-based strategy game similar to Advance Wars. I'm stuck on how to structure my data efficient ...

javascriptmongodbmeteornosql

Sending a JavaScript variable to a different PHP file

My current project involves using Google Maps to autocomplete addresses and convert them into Latitude & Longitude coordinates. I have successfully displayed the result in a DIV, but when I attempt to pass this variable to PHP for database storage, I encou ...

javascriptphpmysql

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

Tips for refreshing the access token in Vue.js without the need for a complete page refresh by utilizing Axios interceptors

I'm currently working on updating the access token using a refresh token if the current token has expired in my application. Below is the code I have in place: axios.interceptors.response.use(undefined, function(error) { if (error) { const origi ...

javascriptvue.jsaxios

Wicked_PDF struggles to display Bootstrap 4 styles

After addressing my previous issue with wicked_pdf, I am now facing a problem where the PDF generated is not displaying the Bootstrap styling of the application. The technologies I'm using include bootstrap 4, ruby '2.4.2', and gem 'ra ...

cssruby-on-railsbootstrap-4ruby-on-rails-5wicked-pdf

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

javascriptjqueryhtmlcss

Retrieving data from Firestore yields an empty result

Having trouble reading from Firestore within a function, even though writes are working fine. Despite following examples on the given link, the query below and its variations result in an empty promise: module.exports.customerByPhone = phone => { r ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

What is the reason for needing a page reload in Javascript or JQuery?

I'm curious why Javascript or jQuery require a page reload before applying certain effects. CSS updates in real-time, as demonstrated by the following example: This changes dynamically without needing to refresh the page @media all and (max-width:7 ...

javascriptjquerycssmedia-queriesreal-time

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

javascriptjquerycssd3.jsuser-input

Having trouble getting jquery to filter json data based on the selected option

I have developed a code using jQuery to filter the options in a drop-down list based on the selection made. The data is in JSON format and is fetched from a database. However, when I select an option from the drop-down list, the code does not enter the loo ...

javascriptjqueryhtml

Show the item in the menu with a label that has either subscript or superscript styling

Within the realm of electrons, the application menu is specified: const menuTemplate = [ { label:"Menu Item 1", click(){ //define some behavior } } ]; Is there a method to exhibit the name of the menu item as Me ...

javascriptnode.jsunicodeelectron

What is the best way to create a dynamic hyperlink that leads to a detailed information page based on the specific link clicked?

I'm currently working on a web page that displays a list of users, and I want each user's name to be clickable, leading to a page with specific details about that user. I'm new to this field, so I'm unsure where to start. My idea is to ...

javascripthtmlnode.jsmongodbexpress

Issue encountered with sortable table in list.js

Encountering a puzzling error while implementing list.js and tabletop for a sortable table sourced from a Google Doc. The error message reads: "Uncaught TypeError: Cannot read property 'childNodes' of undefined," pinpointing the first line in lis ...

javascriptjqueryhtmllistjs

Trouble with sending semicolons in Node.js MSSQL/MSNodesqlv8 database queries

Trying to create a simple API for interacting with a MSSQL v12 database using Nodejs. Successfully connected to the database with the mssql/msnodesqlv8 package, but encountering issues with parameterized queries. code: 'EREQUEST', number: 102 ...

javascriptnode.jssql-serverdatabase

Customize list items using IDs once they have been generated

My vertical timeline is dynamically generated with <li> elements that have an ::after pseudo-class. I want to style specific circular elements after the timeline creation (only changing the color of the circles). I am struggling to add a class to in ...

javascriptcsscss-selectorshtml-listspseudo-element

"Trouble arises when attempting to render a basic Vue.Draggable component within a nested ul

Problem with Nesting After receiving feedback from @Amaarrockz, I attempted to create a sandbox to address the issue I'm facing. However, the problem persists. Here's the code snippet: <div id="app"> <ul> <li ...

javascripthtmlvue.jsvue.draggable

Unveiling the Power of Angular in Handling Date and Time

Recently, I encountered an issue with the following code snippet: <ng-template>{{date:'MM/dd/yyyy h:mm:ss a Z'}}</ng-template>. This code displays a date and time in one long line. My goal is to insert a line break between the date an ...

cssangularjs

submission of form data and automatic redirection to another page

Seeking advice on managing form submissions and page redirection. I have a landing page with a basic form, where users select criteria and are then redirected to page2 displaying tabular data and query information. When submitting the form on Page1, data ...

javascriptphpjquery

Ensuring email address validity within Angular 2.3.1

I'm working on implementing email validation in an Angular 2 form, but I'm facing some challenges making it function properly. Below is the code snippet from my register.html form: <div class="row"> <div class="col-lg-10 col-offset-2"& ...

javascriptangulartypescript