I set up some CSS rules like: .example { color: white; background-color: darkgray; background-color: var(--bg-color); background-color: rgb(from var(--bg-color) r g b / 0.5); } in the expectation that if a browser didn't understand the fairly new relative color syntax (or…
When working with the CSS style writing-mode: vertical-lr; and two different languages font, my text would get aligned to the left side of the kanji on Chrome, but to the right side on Firefox. This code snippet that I'm working…
I have a table with two divs inside a cell. I want the first div aligned to the top of the cell, and the last div aligned to the bottom. This is an example of what the table might look…
I am using better-react-mathjax ^2.0.2 (with MathJax 3.2.2) to render math expressions in a React based project. However, I am facing an issue where some expressions render differently on different browsers(Chrome, Firefox, Safari). PS: We are using MathML for rendering.…
The accessible name computation is complex with 17 subcases for HTML. How can I get an element's Accessible Name in javascript in the browser?
It seems that most browsers on macOS (I suspect other systems too) choose to italicize emojis, which is not what I want. Is there a way to prevent that via CSS, a flag, or an attribute tag? I figure this…
I am working on a billiards scorekeeping app implemented in HTML/CSS/javascript at this repo: https://github.com/Zenilogix-Carl/Site I have been developing using Windows and Chrome, getting expected outputs or at least able to diagnose issues in that environment. I've seen it run…
I have an SVG icon that works fine in other browsers like Chrome, Opera and Safari, but Mozilla has problems with it. Here is the code of my SVG: <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_4_140)'…
How can I get this height constraint to work on webkit, just like FF (left)? Left, firefox = good Right, brave/safari = bad Code: https://codepen.io/flapusmog/pen/RwYvzvq .f { height:250px; width:250px; border:1px solid red; } .t { font-size:50px; } img { height:100%;…
Using values="var(--color1);var(--color2)" in an SVG <animate> tag works in Firefox but not Chrome (see the snippet below). Is there a way to make it work in Chrome? :root { --color1: #7F0000; --color2: #007F00; } <svg width="100" viewBox="-50 -50 100 100">…