RESOLVED DUPLICATE of bug 267358281164
`font-style:italic` when inside an iframe srcdoc is not applied to any elements 
https://bugs.webkit.org/show_bug.cgi?id=281164
Summary `font-style:italic` when inside an iframe srcdoc is not applied to any elements
Ahmad Saleem
Reported 2024-10-09 14:07:46 PDT
Hi Team, While going through MDN, I noticed that we don't apply `font-style: italic` for `abbr` despite it being in CSS. *** Steps to Reproduce *** 1) Go to - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr 2) Look into `HTML DEMO` - look at `CSS` *** Expected Result *** It should be italic. In Chrome Canary 131 and Firefox Nightly 133, it is italic and other `<abbr>` as well. *** Actual Result *** It is not italic. ___ Raising so we can track and fix it. Thanks!
Attachments
rendering in safari, firefox, chrome (1.05 MB, image/png)
2024-11-07 00:00 PST, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-10-16 14:08:14 PDT
<rdar://problem/138062201>
Karl Dubost
Comment 2 2024-11-07 00:00:23 PST
Created attachment 473161 [details] rendering in safari, firefox, chrome Using data:text/html,<!doctype html><html><p><abbr>is it italic</abbr></p></html> This is not italic anywhere in my tests. Safari Technology Preview 206 20621.1.3.21.1 Firefox Nightly 134.0a1 13424.11.4 Google Chrome Canary 132.0.6823.0 6823.0
Karl Dubost
Comment 3 2024-11-07 00:03:24 PST
Now Let's try by adding the style. data:text/html,<!doctype%20html><html><style>abbr%20{font-style:%20italic;color:%20chocolate;}</style><p><abbr>is%20it%20italic</abbr></p></html> Now this is italic everywhere. So This seems to be an issue in the context of MDN.
Karl Dubost
Comment 4 2024-11-07 00:08:36 PST
MDN is using an iframe with srcdoc… ``` <iframe id="output-iframe" srcdoc=" <!DOCTYPE html> <html id=&quot;output-root&quot;> <head> <meta charset=&quot;utf-8&quot;> <meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=edge&quot;> <title></title> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;> <link href=&quot;../../css/editor-tabbed.css?v=341af68&quot; rel=&quot;stylesheet&quot;> <style> </style> <style id=&quot;css-output&quot;> abbr { font-style: italic; color: chocolate; } </style> </head> <body> <div id=&quot;html-output&quot; class=&quot;output editor-tabbed&quot;> <p> You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your <abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content layer separate. This is called &quot;separation of concerns.&quot; </p> </div> <script> function executeExample() { 'use script'; try { } catch(e) { console.error(e); } } </script> </body> </html> "></iframe> ``` Let's create a reduced test case.
Karl Dubost
Comment 5 2024-11-07 00:09:00 PST
This is working too in all browsers. data:text/html,<!doctype%20html><html><iframe%20srcdoc="<!DOCTYPE%20html><html><style>abbr%20{font-style:%20italic;color:%20chocolate;}</style></head>Is%20<abbr>CSS</abbr>%20in%20italic?</body></html>"></iframe></html>
Karl Dubost
Comment 6 2024-11-07 00:28:46 PST
Interesting the style in https://interactive-examples.mdn.mozilla.net/css/editor-tabbed.css?v=341af68 is overriding the style inside the style element. data:text/html,<!doctype html><html><iframe srcdoc="<!DOCTYPE html><html><link href=&quot;https://interactive-examples.mdn.mozilla.net/css/editor-tabbed.css?v=341af68&quot; rel=&quot;stylesheet&quot;><style>abbr {font-style:italic;color:chocolate;}</style><body><div class=&quot;output editor-tabbed&quot;> <p> You can use <abbr>CSS</abbr></p> </div> </body></html>"></iframe></html>
Karl Dubost
Comment 7 2024-11-07 00:36:45 PST
but even more surprising. abbr is not defined in the remote stylesheet. and there are only two mentions of font-style. @font-face { font-family: Fira Sans; font-style: oblique; font-weight: 400; src: local("FiraSans-SemiBoldItalic"), url(/media/fonts/FiraSans-SemiBoldItalic.woff2); } @font-face { font-display: swap; font-family: Inter; font-stretch: 75% 100%; font-style: oblique 0deg 20deg; font-weight: 1 999; src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations"), url(../../media/fonts/Inter.var.woff2) format("woff2-variations"); } ha the style which is modifying the style of the CSS abbr is ``` body { font: var(--type-body-l); } ``` which is itself defined as :root { --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans; --font-body: Inter, var(--font-fallback); --type-body-l: 400 1rem/1.1876 var(--font-body); … }
Karl Dubost
Comment 8 2024-11-07 00:43:30 PST
The style by themselves do not change the italic. https://codepen.io/webcompat/pen/ExqdEPz mystery…
Ahmad Saleem
Comment 9 2024-12-17 16:24:54 PST
*** This bug has been marked as a duplicate of bug 267358 ***
Karl Dubost
Comment 10 2024-12-17 22:53:55 PST
It's not specifc to abbr. But in this example it still requires to call the external CSS. ``` <div> <iframe srcdoc=" <!DOCTYPE html><html> <link href=&quot;https://interactive-examples.mdn.mozilla.net/css/editor-tabbed.css?v=341af68&quot; rel=&quot;stylesheet&quot;> <style>abbr {font-style:italic;color:chocolate;}</style> <body> <div><p><abbr>CSS</abbr> in Italic?</p></div> </body></html> "></iframe> </div> ``` In the inheritance rule. defined in the external CSS, there are 3 levels of variables. <link href=&quot;https://interactive-examples.mdn.mozilla.net/css/editor-tabbed.css?v=341af68&quot; rel=&quot;stylesheet&quot;> ``` :root { --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans; --font-body: Inter, var(--font-fallback); --type-body-l: 400 1rem/1.1876 var(--font-body); } @font-face { font-display: swap; font-family: Inter; font-stretch: 75% 100%; font-style: oblique 0deg 20deg; font-weight: 1 999; src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations"), url(../../media/fonts/Inter.var.woff2) format("woff2-variations") } body { font: var(--type-body-l); } ``` Then inside the style attribute defined inside the iframe. <style>abbr {font-style:italic;color:chocolate;}</style> The font which is being applied is `Inter`. if I remove `Inter` from `--font-body: Inter, var(--font-fallback);` Then it is working using the fallback fonts. So that is leaving us with ``` @font-face { font-display: swap; font-family: Inter; font-stretch: 75% 100%; font-style: oblique 0deg 20deg; font-weight: 1 999; src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations"), url(../../media/fonts/Inter.var.woff2) format("woff2-variations") } ``` Now trying to remove the sources of issues in there. There is only one property which affects the result. ``` @font-face { font-family: Inter; src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations"), url(../../media/fonts/Inter.var.woff2) format("woff2-variations") font-style: oblique 0deg 20deg; } ``` if I comment `font-style: oblique 0deg 20deg;` The italic applies. oblique with angles is defined at https://drafts.csswg.org/css-fonts-4/#font-style-prop So this is an issue with this font and oblique?
Karl Dubost
Comment 11 2024-12-17 23:30:17 PST
``` @font-face { font-family: Inter; font-style: oblique 0deg 20deg; src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations"), url(../../media/fonts/Inter.var.woff2) format("woff2-variations"); } @font-face { font-family: Inter2; font-style: oblique 0deg 20deg; src: url(../../media/fonts/Inter.var.woff2) format("woff2 supports variations") } @font-face { font-family: Inter3; font-style: oblique 0deg 20deg; src: url(../../media/fonts/Inter.var.woff2) format("woff2-variations"); } :root { --font-body: Inter; --type-body-l: 400 1rem/1.1876 var(--font-body); --type-emphasis-m: 600 0.8125rem/1.23 var(--font-body); } body { font: var(--type-body-l); } ``` OK let's use different combinations. I set ``` abbr { /* font-style: italic; */ color: chocolate; } ``` to isolate the issue. italic FAIL --font-body: Inter; italic PASS --font-body: Inter2; italic FAIL --font-body: Inter3; So this call makes the italic fails. url(../../media/fonts/Inter.var.woff2) format("woff2-variations"); And even a local `font-style: italic;` doesn't take over. So there is something wrong with `format("woff2-variations");`
Vitor Roriz
Comment 12 2025-06-03 15:32:08 PDT
I don't think the problem is with `format`. This example is gives a glyph for H in oblique for Chrome and Firefox but not for Safari: ``` <!DOCTYPE html> <html> <style> @font-face { font-family: "Inter"; src: url("/Inter.var.woff2"); /* format("woff2-variations"); */ font-style: oblique 10deg; /* font-style: italic; */ } body { font-family: Inter; font-size: 60px; } .target { /* font-style: italic; */ font-style: oblique 10deg; } </style> <body> <span></span><span class="target">H</span> </body> </html> ``` Now, if instead of oblique we use `italic`, then Chrome renders it in a "italic" way but Safari and Firefox don't: ``` <!DOCTYPE html> <html> <style> @font-face { font-family: "Inter"; src: url("/Inter.var.woff2"); /* format("woff2-variations"); */ /* font-style: oblique 10deg; */ font-style: italic; } body { font-family: Inter; font-size: 60px; } .target { font-style: italic; /* font-style: oblique 10deg; */ } </style> <body> <span></span><span class="target">H</span> </body> </html> ```
Note You need to log in before you can comment on or make changes to this bug.