Closed cbjoldham closed 2 years ago
So this is a very interesting bug that I just fixed in e1023a9
by changing one (1) character. SVG is an XML dialect, which means that tag names are case sensitive in CSS. However, Chrome and friends (hello Webkit) seem to ignore the case sensitivity and apply the CSS. Firefox not so much.
I believe this is only the case if the main document is HTML. If you try and apply CSS via Chrome to an SVG image/document, it will respect case sensitivity. It seems that the document type determines the sensitivity for the entire document, even if XML content is embedded within that document.
I believe this is only the case if the main document is HTML. If you try and apply CSS via Chrome to an SVG image/document, it will respect case sensitivity. It seems that the document type determines the sensitivity for the entire document, even if XML content is embedded within that document.
Is that behavior part of the specification, i.e. that case sensitivity propagates to embedded namespaces? Either Firefox is wrong, or Webkit. I'd say Webkit, because I would expect case sensitivity to be defined by the enclosing namespace.
That I don't know. I'm not sure I specifically ever looked up whether an SVG tag's content was supposed to respect an XML document's case sensitivity or the document's case sensitivity.
On the one hand, I get why it makes sense that a user would expect an XML element under an HTML5 document to respect XML-specific handling of CSS (case-sensitivity in this case).
But I also get why from a programmer's perspective it is much more desirable to set up the CSS engine for the document based on the document type as opposed to having the CSS engine do this context switching when it encounters an SVG element, MathML, etc.
I think when I was developing my CSS selector lib for BeatifulSoup, I took the Webkit route and determined that convention based on the doctype. As far as browsers were concerned, it seemed to be in the majority, whether right or wrong. Chrome and Safari seem to view it as a document-level decision, but that could be the wrong approach.
So, in short: 🤷🏻 .
It seems it is based on document language: https://www.w3.org/TR/selectors-4/#case-sensitive.
Thanks! Okay, so Firefox is off then. Probably related: https://bugzilla.mozilla.org/show_bug.cgi?id=963870
The fix was just released as part of 8.1.9-insiders-4.7.2.
Just pulled 8.1.9-insiders-4.7.2 and cured the clipping in our docs, appreciate the fast turn around and good spot!
Hello, I have discovered this happening again, im using google chrome and recently learned that you can display flow charts in github so I gave it a shot, here is my code and its result
CODE(triple quotes removed here to avoid displaying diagram: `
mermaid
flowchart TD
A[Flat files] -->B[Clean & Store: mongoimport<br><small><i>clean & populate into warehouse</i></small>]
B --> C[Warehouse<br><small><i>store clean semi structured data</i></small>]
C --> D[Processing: Spark Job<br><small><i>manipulate & aggregate based on requirements, populate cooked tables</i></small>]
D --> E[Cooked Data<br><small><i>store structured data ready for user consumption</i></small>]
RESULT:
flowchart TD
A[Flat files] -->B[Clean & Store: mongoimport<br><small><i>clean & populate into warehouse</i></small>]
B --> C[Warehouse<br><small><i>store clean semi structured data</i></small>]
C --> D[Processing: Spark Job<br><small><i>manipulate & aggregate based on requirements, populate cooked tables</i></small>]
D --> E[Cooked Data<br><small><i>store structured data ready for user consumption</i></small>]
I might be making a silly mistake here, any help would be much appreciated 🙏
Contribution guidelines
I've found a bug and checked that ...
mkdocs
orreadthedocs
themescustom_dir
,extra_javascript
andextra_css
Description
I'm using some
mermaid
flowcharts and seeing some minor formatting issues on Firefox vs Chrome - the last character in the strings is often truncated when not trivially short in Firefox.Expected behaviour
Strings should not be trimmed in any browser
Actual behaviour
Strings in Firefox have the last character clipped when not trivially short
Steps to reproduce
This can be replicated on the main docs for instance the "g" of "Debug" is trimmed in Firefox but not Chrome : https://squidfunk.github.io/mkdocs-material/reference/diagrams/#using-flowcharts
Package versions
This can be replicated on the main docs
Configuration
System information
Windows 10 21H2 64-bit